vue如何解决多个异步请求问题
作者:魁望亦是雪
这篇文章主要介绍了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()
没有先后顺序,那个先请求回来那个先显示
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。