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 是一个异步函数,那么相当于就是异步函数并发了。

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

kbc C87 机械键盘 有线键盘 游戏键盘 87键 原厂cherry轴

关注微信公众号

码中人 微信公众号