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() 没有先后顺序，那个先请求回来那个先显示

参考。¹

---

1. 参考cdn ↩︎