关于promise:Promiseall和promiserace的应用场景举例

问题形容

为了解决前端异步函数多层嵌套会产生回调天堂问题，以及回调天堂谬误不不便捕获的问题。所以，那些制作规定的大佬们，就在ES6中退出了一个新性能~Promise。本文次要记录一下Promise.all和promise.race的利用场景并举例说明。

对于Promise的基本概念什么的，这里就不赘述了。

Promise.all办法

简而言之：Promise.all( ).then( )实用于解决多个异步工作，且所有的异步工作都失去后果时的状况。
比方：用户点击按钮，会弹出一个弹出对话框，对话框中有两局部数据出现，这两局部数据别离是不同的后端接口获取的数据。
弹框弹出后的初始状况下，就让这个弹出框处于数据加载中的状态，当这两局部数据都从接口获取到的时候，才让这个数据加载中状态隐没。让用户看到这两局部的数据。
那么此时，咱们就需要这两个异步接口申请工作都实现的时候做解决，所以此时，应用Promise.all办法，就能够轻松的实现，咱们来看一下代码写法

代码附上

<template>
  <div class="box">
    <el-button type="primary" plain @click="clickFn">点开弹出框</el-button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    clickFn() {
      this.alertMask = true; // 关上弹出框
      this.loading = true; // 临时还没数据，所以就出现loading加载中成果

      // 第一个异步工作
      function asyncOne() {
        let async1 = new Promise(async (resolve, reject) => {
          setTimeout(() => {
            // 这里咱们用定时器模仿后端发申请的返回的后果，毕竟都是异步的
            let apiData1 = "第一个接口返回数据啦";
            resolve(apiData1);
          }, 800);
        });
        return async1;
      }
      console.log("异步工作一", asyncOne());  // 返回的是一个Promise对象

      // 第二个异步工作
      function asyncTwo() {
        let async2 = new Promise(async (resolve, reject) => {
          setTimeout(() => {
            let apiData2 = "第二个接口返回数据啦";
            resolve(apiData2);
          }, 700);
        });
        return async2;
      }
      console.log("异步工作二", asyncTwo()); // 返回的是一个Promise对象

      let paramsArr = [asyncOne(), asyncTwo()]

      // Promise.all办法接管的参数是一个数组，数组中的每一项是一个个的Promise对象
      // 咱们在 .then办法外面能够取到 .all的后果。这个后果是一个数组，数组中的每一项
      // 对应的就是 .all数组中的每一项的申请后果返回的值
      Promise
      .all(paramsArr)
      .then((value) => {
        console.log("Promise.all办法的后果", value);
        this.loading = true; // 当初有数据了，所以就敞开loading加载中成果
      });
    },
  },
};
</script>

打印的后果图

Promise.race办法

Promise.race赛跑机制，只认第一名

Promise.race其实应用的并不多，如果真要应用。咱们能够提出这样一个需要：

比方：点击按钮发申请，当后端的接口超过肯定工夫，假如超过三秒，没有返回后果，咱们就提醒用户申请超时

代码附上

<template>
  <div class="box">
    <el-button type="primary" plain @click="clickFn">点击测试</el-button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    async clickFn() {

      // 第一个异步工作
      function asyncOne() {
        let async1 = new Promise(async (resolve, reject) => {
          setTimeout(() => {
            // 这里咱们用定时器模仿后端发申请的返回的后果，毕竟都是异步的
            let apiData1 = "某个申请";
            resolve(apiData1);
          }, 4000);
        });
        return async1;
      }
      console.log("异步工作一", asyncOne());  // 返回的是pending状态的Promise对象

      // 第二个异步工作
      function asyncTwo() {
        let async2 = new Promise(async (resolve, reject) => {
          setTimeout(() => {
            let apiData2 = "超时提醒";
            resolve(apiData2);
          }, 3000);
        });
        return async2;
      }
      console.log("异步工作二", asyncTwo()); // 返回的是pending状态的Promise对象

      // Promise.race接管的参数也是数组，和Promise.all相似。只不过race办法失去的后果只有一个
      // 就是谁跑的快，后果就应用谁的值
      let paramsArr = [asyncOne(), asyncTwo()]

      Promise
      .race(paramsArr)
      .then((value) => {
        console.log("Promise.race办法的后果", value);
        if (value == "超时提醒") {
          this.$message({
            type:"warning",
            message:"接口申请超时了"
          })  
        }else{
          console.log('失常操作即可');
        }
      })
    },
  },
};
</script>

这里就不打印了，后果和上图打印的相似

总结

• Promise.all接管的是数组，失去的后果也是数组，并且一一对应，也能够了解为Promise.all关照跑的最慢的，最慢的跑完才完结。
• Promise.race接管的也是数组，不过，失去的却是数组中跑的最快的那个，当最快的一跑完就立马完结。