Promise、async/await使用场景

2022-09-04 10:35:32

1.Prommise

1.Promis是做什么的？

异步编程的解决方案，一种很常见的场景就是网络请求。
Promise 对象代表一个异步操作，有三种状态：
- pending: 初始状态，不是成功或失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。

优点：

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

缺点：

一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部
当处于 Pending 状态时，无法得知目前进展到哪一个阶段

2.Promise.all

promise.all可以将多个promise实例包装成一个新的promise实例。同时，成功和失败的返回值是不同的。
- 成功的时候返回一个数组
- 失败时则返回最先被reject失败的状态的值。
所有的请求都完成时，才返回一个数组。只要有一个失败了，就先返回这个失败的请求

需求：弹框弹出后的初始情况下，就让这个弹出框处于数据加载中的状态，当这两部分数据都从接口获取到的时候，才让这个数据加载中状态消失。让用户看到这两部分的数据。

这时我们就需要：两个异步接口请求任务都完成的时候做处理，所以此时，使用Promise.all方法，就可以轻松的实现

3.Promise.race方法

Promise.race赛跑机制，只认第一名，就是说promise.race([p1, p2, p3])里哪个结果捕获的快，就返回哪个结果
不管成功还是失败

Promise.race其实使用的并不多，如果真要使用。我们可以提出这样一个需求：

比如：点击按钮发请求，当后端的接口超过一定时间，假设超过三秒，没有返回结果，我们就提示用户请求超时

4.总结

Promise.all接收的是数组，得到的结果也是数组，并且一一对应，也可以理解为Promise.all照顾跑的最慢的，最慢的跑完才结束。
Promise.race接收的也是数组，不过，得到的却是数组中跑的最快的那个，当最快的一跑完就立马结束。

2.async与await

1.async做了什么？

async会返回一个promise对象
async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象。

asyncfunctionfn1(){return123}functionfn2(){return123}

console.log(fn1())//Promise {<resolved>: 123}
console.log(fn2())//123

1.1 注意

async表示函数内部有异步操作
另外注意，一般 await 关键字要在 async 关键字函数的内部，await 写在外面会报错。

2.await 在等什么？

async函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值
右侧如果是函数，那么函数的return值就是「表达式的结果」
右侧如果是一个 ‘hello’ 或者什么值，那表达式的结果就是 ‘hello’

//Promise.then 成功情况 对应 awaitasyncfunctiontest3(){const p3= Promise.resolve(3);
  p3.then(data=>{
    console.log('data', data);//data 3})const data=await p3;
  console.log('data', data);//data3}test3();//因此Promise.then 可以 await代替

async/await 的优势在于处理 then 链:

https://segmentfault.com/a/1190000007535316

3.await等到之后，做什么？

分两种情况：

1.不是promise对象

如果不是 promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果

2.是promise对象

如果它等到的是一个 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。

3.今日头条面试题

asyncfunctionasync1(){
        console.log('async1 start')awaitasync2()
        console.log('async1 end')}asyncfunctionasync2(){
        console.log('async2')}
    
    console.log('script start')setTimeout(function(){
        console.log('setTimeout')},0)async1();newPromise(function( resolve){
        console.log('promise1')resolve();}).then(function(){
        console.log('promise2')})
    
    console.log('script end')

注：答案是以浏览器的eventloop机制为准的，在node平台上运行会有差异

     script start
     async1 start
     async2
     promise1
     script end
     async1 end
     promise2
     setTimeout

4.首先看一下Event loop 宏任务微任务

执行顺序：
- 先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中
- 遇到异步微任务则将异步微任务放入微任务队列中
- 当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行
- 微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

5.分析面试题

1.直接打印同步代码 console.log(‘script start’)

首先是2个函数声明，虽然有async关键字，但不是调用我们就不看。然后首先是打印同步代码 console.log('script start')

2.将setTimeout放入宏任务队列

3.调用async1，打印同步代码 console.log( ‘async1 start’ )

4.遇到await async2()

1.它先计算出右侧的结果，2.然后看到await后，中断async函数

- 先得到await右侧表达式的结果。执行async2()，打印同步代码console.log('async2'), 并且return Promise.resolve(undefined)
- await后，中断async函数，先执行async外的同步代码

目前就直接打印 console.log('async2')

被阻塞后，执行async之外的代码

5.执行new Promise()，Promise构造函数是直接调用的同步代码，所以 console.log( ‘promise1’ )

代码运行到promise.then()

代码运行到promise.then()，发现这个是微任务，所以暂时不打印，只是推入当前宏任务的微任务队列中。

6.打印同步代码console.log( ‘script end’ )

7.执行微任务打印console.log( ‘async1 end’ )

8.执行微任务打印promise2

9.执行宏任务console.log(‘setTimeout’)