背景
前端页面中经常会遇到需要发起异步请求后，要等到异步请求返回结果才能执行某个操作的需求，如果不了解promise和async await等JS异步调用的实现方式，就可能写出一些较为奇怪的代码。例如，promise和async await混用等现象。
弄清callback、Promise、async await的区别很重要
- callback 、Promise 和 async await三者都是异步编程解决方案。
- callback 比较常见不需解释，是基于ES5语法规范的。
- Promise 在语法上是一个对象(准确说是一个构造函数，用来生成Promise实例。)，是基于ES6语法规范的。
- async await是基于ES7语法规范的，。
几个使用异步时经常出现的几个场景
1、Promise和async await混用
image.png
- 这类错误最常见，混用是由于不清楚Promise 和 async await两者的区别所致。
- 使用async await的目的多数情况下是为了让我们的异步代码看起来更像同步的，易于阅读与理解。
- async 函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。
- 所以，正确的写法要么改成使用promise形式，要么使用async await形式
1.1、改成promise形式
image.png
- 通过then来处理成功时返回的数据信息，通过catch来处理失败的信息。
1.2、改成使用async await的形式，如下
image.png
2、不知道await后面跟的是不是promise对象
- await只能出现在async函数中。
- 如果不是 promise, await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async- 内部，把这个同步函数的返回值作为达式的结果。
- 如果是 promise, await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。
2.1、不确定await后面是不是promise对象，但是报错了，我怎么捕获
-
可以直接使用 try catch来捕获异常。如下图
image.png
2.2、确定await后面就是promise对象，捕获异常
-
可以直接使用promise的catch方法捕获异常。如下图
image.png
- 该种情形下也可以采用try catch的形式
3、多个请求需要发出，互相之间没有返回值依赖关系
3.1、并发请求需要全部成功才能继续执行
image.png
- 就用promise.all即可，将所有要发出的请求整理成数组，每一个请求都是一个promise。
3.2、并发请求中某个请求失败，但不能影响整体逻辑执行
image.png
- 上图的写法是某个请求的失败可以继续执行业务的情况。
两种情况的区别在于，有无catch处理单个异常
4、多个请求要发出，之间有返回值的相互依赖关系（即第一个请求返回值是第二个请求的入参，以此类推）
4.1、使用promise形式实现
image.png
- 上图为使用promise形式实现的多个请求串行调用后的范式。
- 有人可能会问，为什么使用promise的方式可以一直.then下去，这是因为，第一个then返回的是一个新的- - - promise对象，第二个then等待这个新返回的promise对象的状态变化而变化，如果新对象的状态变为resolved，就调用第二个then的第一个回调函数，如果状态变为rejected，就调用第二个then的第二个回调函数。
4.2、使用async await形式实现
image.png
- 上图为使用async await的范式。
以上几种情况为经常收到业务同学询问的典型情景，其余情形待后续补充。
相比于promise， async await 的优点
- 当多个接口间有返回值依赖关系时，使用async await可以让代码简洁，不需要像Promise那样需要写then，避免了代码嵌套。
网友评论