async/await和Promise杂谈

前言

Promise和async/await是当前前端最常见的异步程序处理方式，async/await是基于Promise所产生的语法糖，该博客没有主题，纯粹就是针对两者的一些知识的整理，默认读者已经具备了Promise和async/await的基础使用能力。

Promise相关

• Promise的并行
  说到Promise的并行，很多人都知道就是多个Promise同时执行，但是由于这多个的Promise执行后返回结果的顺序不一定按照执行开始的顺序进行，所以ECMAScript设计人员在Promise推出的同时也推出了Promise.all这个API，就是用于方便处理Promise的并行操作的。

  • Promise.all
    Promise.all接收一组Promise实例，当这一组实例全部都resolve得出结果进行下一步操作， 又或者其中一个进入rejected状态的时候，就停止执行直接抛出错误。

    • 用法实例

      
      全部成功
      其中一个失败

    • 缺点
      Promise.all的缺点从上面就能看出来，在接收的Promise实例组中其中一个出现错误的时候，就算之前的实例执行成功了他也不会返回结果，而是直接中断执行并抛出错误。但是我们使用Promise的场景通常都是进行请求，这也就导致了在一组请求中其中一个出错，其他的请求全部无结果，所以这个API非常不好用。
      针对这个问题，ECMAScript设计组后来又想出来一个新的API，这个API就是用于解决Promise.all的问题而设计的，它就是Promise.allSettled。

  • Promise.allSettled
    Promise.allSettled和上面的Promise.all一样接受一组Promise实例，但是不同的是它在实例执行失败的时候也不会中断整个流程，而是在最后所有实例都resolve后，将全部的结果返回出来，并且用status表明执行的状态，下面是使用例子:

    • 用法实例

      
      image.png

    • 缺点
      从上面所说的Promise.allSettled似乎非常不错，但实际上它也有问题，因为该API目前只是出于stage-4阶段，所以存在兼容性问题，当然在chrome浏览器中已经实现了。
      

      image.png
      既然说存在兼容性问题，如果现在想用的话，当然也可以自己去实现这个API了。

  • 实现Promise.allSettled
    首先我们观察，在Promise.all接收的Promise实例组中，只要其中有一个实例进入rejected状态，整个流程就被中断，而Promise.allSettled则不会，那么现在关键问题就在于，是否能够不让Promise实例组的实例在rejected的时候不被Promise.all所捕获呢?
    实际上我们可以利用Promise自带的then方法将rejected状态的Promise实例的错误吞掉用作自行处理即可，那么在then方法执行后返回的新的Promise实例就一定都是成功的了。
    既然思路有了，那么我们对下面这一组任务进行测试，首先可以看到执行结果第一个失败后就被中断了:
    

    image.png

现在我们需要将三个task方法都加上then方法，将它自身抛出的错误放到then方法中去处理，实现Promise.allSettled的原理就是这么简单：

image.png
执行结果:
image.png

然后现在对上面的代码进行优化并实现一个自己的Promise.allSettled:

image.png

• Promise的错误处理
  Promise的错误处理设计上还是蛮不错的，常见用法如下:
  • 单独处理
    promise.then(s1, f1)，then方法的第二个参数接收错误处理函数。
  • 统一处理
    promise.then(s1).catch(f1)，使用catch方法可以所产生的错误进行统一处理

async/await

async/await是es8的版本才出的，是基于Promise的语法糖，实话说确实比Promise要好用些，Promise的出现是用于解决回调地狱的问题，也就是代码的横向金字塔发展问题，但是Promise始终还是有缩进的，而async/await则可以让你使用同步的方式去写异步代码。

• 基本用法
  await必须在有async关键字前缀的函数中使用，并且await后面必须是一个Promise实例，也就是说必须和Promise结合使用。
  

  image.png

• 错误处理方式
  通常我们都是使用try catch对async/await代码进行错误处理的，如下:
  

  image.png
  这点我觉得和Promise的错误处理方式比起来比较有些不足，因为当使用async/await的函数多的时候，你会发现到处都是try catch。
  当然，因为async/await是基于Promise的语法糖，所以我们可以使用Promise的方式对async/await错误处理的方式进行优化。

• 错误处理优化方式
  

  image.png
  上图写法可以保证当存在错误时候，函数不会继续执行下去，而执行成功的时候，则结果会赋值给res，失败则不会。
  错误处理函数建议抽离进行统一处理，如果使用的是axios，那么可以在axios的拦截器中进行统一错误处理。

• 一道async/await的面试题
  现在我们来看看async/await的一道面试题，这道题是我见过最坑的一道async/await的面试题了。

let a = 0
let test = async () => {
    a = a + await 10
    console.log(a)
}
test()
console.log(++a)  
// 请问输出什么

一开始我目测输出的是1和11，然而在执行过后的结果是这样的:

image.png
为什么输出的是1和10呢？？
await执行的异步代码不是存放在事件队列的末尾执行吗，那么++a应该在前面执行，这时候a已经是1了，那么1+10不是等于11吗?

实际上这一道题的结果是需要根据这段代码的堆栈顺序来确定:

1. 执行test函数的时候，a = a + await 10的时候，a的值首先被确定为0，但是await 10没有执行，也就是说在test函数中的a被确定了为0，a值得确定和await 10是需要分开进行堆栈的
2. ++a，这时候才对a进行自增并打印
3. 执行完毕上面两个步骤后，才执行await 10并得到数字10
4. 因为在第一步的时候，test函数中的a首先就被确定为0，然后第三步的时候await 10得到数字10，所以这时候的a = a + await 10就变成了a = 0 + 10
   所以结果再test函数中打印出来的a就是10。

当然啦，如果把test()和console.log(++a)的顺序调换过来，得出的结果就是预期的1和11了。