让前端飞Web前端之路饥人谷技术博客

async/await和Promise杂谈

2019-10-10  本文已影响0人  大春春

前言

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

Promise相关

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

image.png
执行结果:
image.png

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

image.png

async/await

async/await是es8的版本才出的,是基于Promise的语法糖,实话说确实比Promise要好用些,Promise的出现是用于解决回调地狱的问题,也就是代码的横向金字塔发展问题,但是Promise始终还是有缩进的,而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了。

上一篇 下一篇

猜你喜欢

热点阅读