本文介绍: 【代码】【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要晚。
具体代码如下
<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])里面哪个结果返回得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
原文地址:https://blog.csdn.net/m0_61049675/article/details/135933274
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_63335.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。