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

5次阅读

共计 2573 个字符，预计需要花费 7 分钟才能阅读完成。

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

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

简而言之：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 其实应用的并不多，如果真要应用。咱们能够提出这样一个需要：

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

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