恢复功能之前如何等待JavaScript Promise解决？

Question

我正在做一些单元测试。测试框架将页面加载到iFrame中，然后对该页面运行声明。在每个测试开始之前，我创建一个Promise，将iFrame的onload事件设置为call
resolve()，设置iFrame的事件src，并返回promise。

因此，我可以调用loadUrl(url).then(myFunc)，它将在执行任何myFunc操作之前等待页面加载。

我在测试中的所有地方都使用了这种模式（不只是用于加载URL），主要是为了允许对DOM进行更改（例如，点击按钮，然后等待divs隐藏和显示）。

这种设计的缺点是，我不断编写带有几行代码的匿名函数。此外，尽管有变通方法（QUnit
assert.async()），但定义诺言的测试函数在诺言运行之前就已完成。

我想知道是否有任何方法可以从a中获取值Promise或等待（阻止/睡眠）直到其解析，类似于.NET的方法IAsyncResult.WaitHandle.WaitOne()。我知道JavaScript是单线程的，但是我希望这并不意味着函数不能产生结果。

本质上，是否有一种方法可以使以下人员按正确的顺序吐出结果？

function kickOff() {

  return new Promise(function(resolve, reject) {

    $("#output").append("start");



    setTimeout(function() {

      resolve();

    }, 1000);

  }).then(function() {

    $("#output").append(" middle");

    return " end";

  });

};



function getResultFrom(promise) {

  // todo

  return " end";

}



var promise = kickOff();

var result = getResultFrom(promise);

$("#output").append(result);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"></div>

Answer 1

我想知道是否有任何方法可以从Promise中获取值或等待（阻止/睡眠）直到其解决，类似于.NET的IAsyncResult.WaitHandle.WaitOne（）。我知道JavaScript是单线程的，但是我希望这并不意味着函数不能产生结果。

浏览器中的当前Javascript版本没有wait()或sleep()允许运行其他内容。因此，您根本无法满足您的要求。相反，它具有异步操作，可以执行其操作，然后在操作完成时调用您（就像您一直在使用promise一样）。

部分原因是由于Javascript的单线程性。如果单线程正在旋转，则直到该旋转线程完成后，其他Javascript才能执行。ES6引入了yield一些生成器和生成器，这些生成器将允许一些类似的合作技巧，但是我们可以通过多种方式在已安装的浏览器中使用它们（它们可以用于控制JS引擎的某些服务器端开发中）正在使用）。

仔细管理基于承诺的代码可以控制许多异步操作的执行顺序。

我不确定我确切了解您要在代码中实现的顺序，但是您可以使用现有kickOff()函数执行类似的操作，然后.then()在调用它后附加一个处理程序：

function kickOff() {
  return new Promise(function(resolve, reject) {
    $("#output").append("start");

    setTimeout(function() {
      resolve();
    }, 1000);
  }).then(function() {
    $("#output").append(" middle");
    return " end";
  });
}

kickOff().then(function(result) {
    // use the result here
    $("#output").append(result);
});

这将以保证的顺序返回输出-像这样：

start
middle
end

2018年更新（此答案写出三年后）：

如果您转换代码或在支持ES7功能（例如async和）的环境中运行代码，await现在await可以使代码“出现”以等待诺言的结果。它仍在发展中。它仍然不会阻止所有Javascript，但是它确实允许您以更友好的语法编写顺序操作。

代替ES6的处理方式：

someFunc().then(someFunc2).then(result => {
    // process result here
}).catch(err => {
    // process error here
});

你可以这样做：

// returns a promise
async function wrapperFunc() {
    try {
        let r1 = await someFunc();
        let r2 = await someFunc2(r1);
        // now process r2
        return someValue;     // this will be the resolved value of the returned promise
    } catch(e) {
        console.log(e);
        throw e;      // let caller know the promise was rejected with this reason
    }
}

wrapperFunc().then(result => {
    // got final result
}).catch(err => {
    // got error
});