async / await 为什么比 promise 好？

本文主要是举了很多例子深入浅出说明为什么应该用 async / await，而不是用 promise。 

01 背景

async function 用来定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。如果你在代码中使用了 async / await，就会发现它的语法和结构会更像是标准的同步函数。

ES7 引入的 async/await 是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码异步访问资源的能力。

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

02 例子 

Promise 例子，

promise 例子

相对应用 async / await 的方式，

async / await 例子

看这个例子觉得还好，但是注意 promise 一定要做异常捕获（就是 .catch），如果没有做异常捕获，出错了会在浏览器 onerror 函数收到 

promise error 

明显这里，async 异步函数看起来是同步是方式，所以在异常捕获和断点调试上更加方便。

如果要同时执行很多异步函数，或者要同时（并行或者串行）执行，用 promise 就有点复杂。 

多个 promise 嵌套

相比，如果用 async / await 就优雅很多， 

多个 async / await 例子

上面的串行异步异步函数的例子，如果是 promise 两层嵌套就有些复杂了，更不用想要是有三层以及四层串行代码会怎么样。 

但对于 async / await 的写法还是一样，看起来非常友好，代码的可读性、维护性都比 promise 好。

如果是并行的异步函数呢？promise all 的写法， 

Promise.all

这样在时间效率上是最高的，等所有请求一起回来再处理。 那么 async / await 有没有类似的方式呢？其实也是可以的。

1. async / await 也可以用 Promise.all 

async + promise.all

所以如果是多个并行请求，也可以结合 async + Promise.all 来处理。

2. 关于 async / await 并发，你可能不知道的知识点 

如果我们不需要等所有并发的异步函数或者请求都回来后统一处理，那么我们可以这样。 

async forEach 并发

如果是 async / await 多个串行，那么就是这样， 

async 串行

那为什么是这样呢？因为 forEach 传入是一个回调函数，你可以理解 arr.forEach(callback) 就是 

所以如果 forEach 的 callback 是一个异步函数，那么相当于就是异步函数并发了。 

欢迎关注公众号: 前端全栈技术