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了。

推荐阅读更多精彩内容

  • 原文连接:https://blog.csdn.net/sinat_17775997/article/details...
    小豆soybean阅读 1,457评论 0 6
  • 简单介绍下这几个的关系为方便起见 用以下代码为例简单介绍下这几个东西的关系, async 在函数声明前使用asyn...
    _我和你一样阅读 7,566评论 0 12
  • async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async 函数是...
    huilegezai阅读 536评论 0 6
  • 含义 async函数是Generator函数的语法糖,它使得异步操作变得更加方便。 写成async函数,就是下面这...
    oWSQo阅读 497评论 0 2
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 4,035评论 2 37