我已开始学习JavaScript中的异步编程。请查看下面的代码:
const myPromise = () => Promise.resolve('I have resolved');
function firstFunction() {
myPromise().then(res => console.log(res));
console.log('firstFunction');
}
async function secondFunction() {
console.log(await myPromise());
console.log('secondFunction');
}
firstFunction()
secondFunction();
- firstFunction
- I have resolved
- I have resolved
- secondFunction
我对这个输出很满意,我认为我也理解了这其中的原因:
- FirstFunction() 进入调用栈
- 承诺会被放在事件循环中暂停执行
- console.log('firstFunction') 运行并打印 (firstFunction)
- 现在调用栈为空,因此已解决的承诺将被打印 (I have resolved)
- 接下来 SecondFunction() 进入调用栈
- 由于我们使用了 Async await,该代码将等待 myPromise()
- 然后将打印 (I have resolved)
- 最后它将打印 (secondFunction)
当我将上述代码更改为以下方式时:
const myPromise = () => Promise.resolve('I have resolved');
function sayHi() {
console.log('hi');
}
function firstFunction() {
myPromise().then(res => console.log(res));
console.log('firstFunction');
}
async function secondFunction() {
console.log(await myPromise());
console.log('secondFunction');
}
firstFunction()
secondFunction();
sayHi();
- firstFunction
- 我已经解决了
- 我已经解决了
- secondFunction
- hi
- firstFunction
- hi
- 我已经解决了
- 我已经解决了
- secondFunction
为什么Hi不是最后显示
。答案是因为在你的代码中没有任何指示等待firstFunction
和secondFunction
完成,就这么简单。 - KeithfirstFunction
和secondFunction
都是匿名框架的一部分,需要完成后才能开始事件循环的下一个迭代。 - Ivar