zoukankan      html  css  js  c++  java
  • promise.all的应用场景举例

    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>

    打印的结果图

    111.png

  • 相关阅读:
    Educational Codeforces Round 83 --- F. AND Segments
    Educational Codeforces Round 83 --- G. Autocompletion
    SEERC 2019 A.Max or Min
    2019-2020 ICPC Southwestern European Regional Programming Contest(Gym 102501)
    Educational Codeforces Round 78 --- F. Cards
    今天我学习了一门全新的语言
    codeforces 1323D 题解(数学)
    Educational Codeforces Round 80 (Div. 2) 题解 1288A 1288B 1288C 1288D 1288E
    Educational Codeforces Round 81 (Div. 2) 题解 1295A 1295B 1295C 1295D 1295E 1295F
    Codeforces Round #617 (Div. 3) 题解 1296C 1296D 1296E 1296F
  • 原文地址:https://www.cnblogs.com/magicg/p/15236885.html
Copyright © 2011-2022 走看看