问题形容

为了解决前端异步函数多层嵌套会产生回调天堂问题，以及回调天堂谬误不不便捕获的问题。所以，那些制作规定的大佬们，就在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接管的也是数组，不过，失去的却是数组中跑的最快的那个，当最快的一跑完就立马完结。