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

本文主要是介绍【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示（使用Promise.all和Promise.race），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

Pomise.all
Promise.race

Pomise.all

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

具体代码如下

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