javascript异步之Promise.all()、Promise.race()、Promise.finally()

同期异步系列文章引荐
谈一谈javascript异步
javascript异步中的回调
javascript异步与promise
javascript异步之Promise.resolve()、Promise.reject()
javascript异步之Promise then和catch
javascript异步之async(一)
javascript异步之async(二)
javascript异步实战
javascript异步总结归档

本日我们继承议论promise
收集上关于PromiseAPI运用的文章不足为奇,为了坚持javascript异步系列文章的完整性,现在对promise的API举行简朴周全的引见

准备工作

我在easy-mock添加了三个接口,备用
《javascript异步之Promise.all()、Promise.race()、Promise.finally()》
依旧运用axios举行ajax要求

Promise.all()

Promise.all()有点像“并行”
我们看一个栗子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>promise</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <script>
    {
      const p1 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
        .then(({
          data
        }) => {
          console.log('p1胜利啦');
          return data.data
        })

      const p2 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise2')
        .then(({
          data
        }) => {
          console.log('p2胜利啦');
          return data.data
        })

      const p3 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
        .then(({
          data
        }) => {
          console.log('p3胜利啦');
          return data.data
        })

      const p = Promise.all([p3, p1, p2])
        .then(arr => {
          console.log(arr);
          console.log('Promise.all胜利啦');   
        })
        .catch(err=>{
          console.log(err,'Promise.all错啦');
        })
    }
  </script>
</body>

</html>

我们晓得axios返回的是一个promise对象,我们能够看下

 console.log(p1);

《javascript异步之Promise.all()、Promise.race()、Promise.finally()》
Promise.all就是用于将多个 Promise 实例,包装成一个新的 Promise 实例
Promise.all,吸收一个数组作为参数,数组的每一项都返回Promise实例
我们重点看这段代码

     const p = Promise.all([p3, p1, p2])
        .then(arr => {
          console.log(arr);
          console.log('Promise.all胜利啦');   
        })
        .catch(err=>{
          console.log(err,'Promise.all错啦');
        })

p1,p2,p3都是返回promise实例,Promise.all不关心他们的实行递次,假如他们都返回胜利的状况,Promise.all则返回胜利的状况,输出一个数组,是这三个p1,p2,p3的返回值,数组的递次和他们的实行递次无关,和他们作为参数分列的递次有关
我们看下输出
《javascript异步之Promise.all()、Promise.race()、Promise.finally()》
为了是拉长接口三的返回时候我对接口三的数据举行了修正,返回值是长度1000-2000之间的随机数组,所以p3的实行要晚于p1和p2,
但我们输出的arr,p3依旧在前面,这给我们带来一个方便,返回值数组的递次和要领的实行递次无关,能够举行工资举行掌握
我们将p1做一下修改,使p1报错

 const p1 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
        .then(({
          data
        }) => {
          console.log('p1胜利啦');
          return xxxx.data//将data.data修正为xxxx.data
        })

《javascript异步之Promise.all()、Promise.race()、Promise.finally()》
假如有一个返回失利(reject),Promise.all则返回失利(reject)的状况,此时第一个被reject的实例的返回值,会传递给P的回调函数。
三个promise实例参数之间是“与”的关联,悉数胜利,Promise.all就返回胜利,有一个失利,Promise.all就返回失利
换个角度说,一个promise的实行效果依赖于别的几个promise的实行效果,
比方:
几个ajax悉数实行完了,才衬着页面,
几个ajax悉数实行完了,才做一些数据的盘算操纵,
不关心实行递次,只关心集体的实行效果

Promise.race()

Promise中的竞态,用法和Promise.all相似,对应参数的要乞降Promise.all雷同,传入一个数组作为参数,参数要返回一个Promise实例
race就是合作的意义,数组内的Promise实例,谁实行的快,就返回谁的实行效果,不管是胜利照样失利

const p = Promise.race([p3, p1, p2])
        .then(res => {
          console.log(res);
          console.log('Promise.all胜利啦');   
        })
        .catch(err=>{
          console.log(err,'Promise.all错啦');
        })

《javascript异步之Promise.all()、Promise.race()、Promise.finally()》
经由过程输出我们发明
p1是第一个完成的,所以p的返回效果就是p1的实行效果
而且就算完成,然则 历程不会马上住手,还会继承实行下去。

关于race的运用场景

搜了一下,许多文章都说是用来处理收集超时的提醒,相似于下面如许

      const p3 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
        .then(({
          data
        }) => {
          console.log('p3胜利啦');
          return data.data
        })
      const p4 = new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('收集连接超时')), 50)
      })
     const p = Promise.race([p3, p4])
        .then(res => console.log(res))
        .catch(err => console.log(err));

p3的ajax和50ms的定时器比较,看谁实行的快,假如凌驾了50ms,p3的ajax还没返回,就示知用户收集连接超时
这里有个题目,就算提醒超时了,p3还在继承实行,它并没有停下来,直到有状况返回
个人观点:race能够用来为ajax要求的时长规定局限,假如ajax要求时长凌驾xxxms会实行某个要领,或许ajax要求时长不凌驾xxms会实行某个要领,总之,race的运用空间不是很大

Promise.finally()

finally要领用于指定不管 Promise 对象末了状况怎样,都邑实行的操纵。该要领是 ES2018 引入规范的。

      const p = Promise.race([p3, p4])
        .then(res => console.log(res))
        .catch(err => console.log(err))
        .finally(() => {
          console.log("finally的实行与状况无关")
        });

当promise获得状况(不管胜利或失利)后就会实行finally,

原文链接

参考链接
Promise 对象
Promise.prototype.finally

    原文作者:陌上寒
    原文地址: https://segmentfault.com/a/1190000017974025
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞