8张图帮你一步步看清 async/await 和 promise 的执行顺序

需要具备的前置知识

• promise的使用经验
• 浏览器端的eventloop

不过如果是对 ES7 的 async 不太熟悉，是没关系的哈，因为这篇文章会详解 async。

那么如果不具备这些知识呢，推荐几篇我觉得讲得比较清楚的文章

• https://segmentfault.com/a/11... 这是我之前写的讲解eventloop的文章，我觉得还算清晰，但是没涉及 async
• https://segmentfault.com/a/11... 这是我读过的讲async await最清楚的文章
• http://es6.ruanyifeng.com/#do... promise就推荐阮一峰老师的ES6吧，不过不熟悉 promise 的应该较少啦。

主要内容

第1部分：对于async await的理解

我推荐的那篇文章，对 async/await 讲得更详细。不过我希望自己能更加精炼的帮你理解它们

这部分，主要会讲解 3 点内容

• 1.async 做一件什么事情？
• 2.await 在等什么？
• 3.await 等到之后，做了一件什么事情？
• 4.补充: async/await 比 promise有哪些优势？(回头补充)

1.async 做一件什么事情？

一句话概括： 带 async 关键字的函数，它使得你的函数的返回值必定是 promise 对象

也就是

如果async关键字函数返回的不是promise，会自动用Promise.resolve()包装

如果async关键字函数显式地返回promise，那就以你返回的promise为准

这是一个简单的例子，可以看到 async 关键字函数和普通函数的返回值的区别

async function fn1(){
    return 123
}

function fn2(){
    return 123
}

console.log(fn1())
console.log(fn2())

Promise {<resolved>: 123}

123

所以你看，async 函数也没啥了不起的，以后看到带有 async 关键字的函数也不用慌张，你就想它无非就是把return值包装了一下，其他就跟普通函数一样。

关于