【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示(使用Promise.all和Promise.race)

【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示(使用Promise.all和Promise.race)

Pomise

Pomise.all

  • Promise.all将多个Promise实例聚合成一个新的Promise实例。请求成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败的值(即如果有一个Pomise失败,则整个Pomise都返回失败)。
  • Promise.all获得的成功结果数组里的数据顺序和Promise.all接收到的数组顺序是一致的,即使Promise1的结果获取的比Promise2要晚。

具体代码如下

javascript 复制代码
<template>
  <div id="app"></div>
</template>
<script>
import { getuser, getlist, getdetail } from "@/api/api";
export default {
  name: "App",
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取后端数据
    async getData() {
      let Promise1 = await getuser(); //调用成功
      let Promise2 = await getlist(); //调用成功
      let Promise3 = await getdetail(); //调用失败
      let Promise4 = await getdetail(); //调用失败
      Promise.all([Promise1, Promise2])
        .then((result) => {
          console.log(result); //[[用户信息], [用户列表]]
        })
        .catch((error) => console.log(`Error in promises ${error}`));

      Promise.all([Promise1, Promise2, Promise3, Promise4])
        .then((result) => {
          console.log(result); //调用失败。返回Promise3错误信息
        })
        .catch((error) => console.log(`Error in promises ${error}`));
    },
  },
};
</script>

Promise.race

  • Promise.race([Promise1, Promise2, Promise3])里面哪个结果返回得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
相关推荐
2503_928411566 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pu_Nine_97 小时前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
我有一只臭臭1 天前
ES5 和 ES6 类的实现
前端·javascript·es6
Run Freely9371 天前
Ajax-day2(图书管理)-弹框显示和隐藏
前端·javascript·ajax
Aotman_2 天前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
xkroy2 天前
ajax
前端·javascript·ajax
元亓亓亓2 天前
JavaWeb--day3--Ajax&Element&路由&打包部署
android·ajax·okhttp
Yvonne爱编码2 天前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
lwprain3 天前
龙蜥8.10中spark各种集群及单机模式的搭建spark3.5.6(基于hadoop3.3.6集群)
大数据·ajax·spark
知识分享小能手3 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3