vue如何解决多个异步请求问题
更新时间：2025年04月09日 09:39:47 作者：魁望亦是雪
这篇文章主要介绍了vue如何解决多个异步请求问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue一个页面很多接口时，异步请求的优化
1.使用 Promise.all()
Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例， 那个输入的所有promise的resolve回调的结果是一个数组。
这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。
它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息
let p1 = new Promise((resolve, reject) => {
getNumber()
resolve('成功了p1')
})
let p2 = new Promise((resolve, reject) => {
getName()
resolve('成功了p2')
})
let p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([p1, p2, p3]).then((result) => {
console.log(result) // ['成功了p1', '成功了p2', 'foo']
}).catch((error) => {
})Promise.all 在任意一个传入的 promise 失败时返回失败。
例如：
如果你传入的 promise中，有四个 promise 在一定的时间之后调用成功函数，有一个立即调用失败函数，那么 Promise.all 将立即变为失败。
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
reject('reject');
});
Promise.all([p1, p2, p3]).then(values => {
console.log(values);
}).catch(reason => {
console.log(reason)
});2.Promise.race(iterable) 方法返回一个 promise
一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// 两个都完成，但 p2 更快
});3.Promise.all()与Promise.race()请求时的区别
Promise.all()适合于后面的异步请求接口依赖前面的接口请求的数据时使用。Promise.race()没有先后顺序，那个先请求回来那个先显示
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
这篇文章主要介绍了详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了vue实现收缩展开效果的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue2 web多标签输入框elinput是否当前焦点的相关资料,讲解了如何在产品中实现用户输入文字后按下回车键生成标签并显示在页面上的功能,通过组件的使用和改造,解决了输入不连续的问题,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vue全局组件与局部组件的区别，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配,下面这篇文章主要给大家介绍了关于如何在vue3项目中使用新版高德地图的完整步骤,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue 在methods中调用mounted的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在组件中增加的css加了scoped属性之后,就在会在当前这个组件的节点上增加一个data-v-xxx属性,下面这篇文章主要给大家介绍了关于Vue中CSS scoped原理的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue使用echarts如何实现双柱状图和双y轴的柱状图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
自从入了 Vue 之后，一直在用 axios 这个库来做一些异步请求。下面这篇文章主要给大家介绍了关于axios中cookie跨域及相关配置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。2017-12-12
这篇文章主要介绍了浅谈vue中resetFields()使用注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论