如何等待JavaScriptpromise解决后再恢复功能？

Question

我在测试中到处使用这种模式（不仅仅是加载URL)，主要是为了允许发生对DOM的更改（例如mimick单击按钮，并等待divs隐藏和显示）。

这种设计的缺点是，我总是用几行代码编写匿名函数。此外，虽然我有一个解决方案（QUnit的assert.async())，但定义promise的测试函数在promise运行之前完成。

我想知道是否有任何方法可以从promise中获取值，或者等待（block/sleep）直到它解决为止，类似于.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的代码可以控制许多异步操作的执行顺序。

我不太清楚您想在代码中实现什么顺序，但您可以使用现有的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

如果您在支持ES7特性（如Async和Await）的环境中传输代码或运行代码，现在可以使用Await使代码“出现”以等待promise的结果。它仍然是在有promise的情况下发展的。它仍然不会阻止所有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
});