vue多个方法的异步请求

1、async 和 await

async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async 是异步的意思，而 await 是 async wait的简写，即异步等待。

 1 // 假设这是我们要请求的数据
 2 function getSomething(n) {
 3     return new Promise(resolve => {
 4         // 模拟1s后返回数据
 5         setTimeout(() => resolve(222), 1000);
 6     });
 7 }
 8 
 9 function requestSomething() {
10     console.log(111);
11     getSomething().then(res => console.log(res));
12     console.log(333);
13 }
14 requestSomething() //这个时候会输出 111，333，222
15 
16 // 如果想要等数据返回后再执行后面的代码，那么就要使用 async/await
17 async function requestSomething() {
18     console.log(111);
19     // 这时something会等到异步请求的结果回来后才进行赋值，同时不会执行之后的代码
20     const something = await getSomething();
21     console.log(something)
22     console.log(333);
23 }
24 requestSomething() //这个时候会输出 111，222，333

2、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的是第一个抛出的错误信息

 1 let p1 = new Promise((resolve, reject) => {
 2   getNumber()
 3   resolve('成功了p1')
 4 })
 5 
 6 let p2 = new Promise((resolve, reject) => {
 7   getName()
 8   resolve('成功了p2')
 9 })
10 let p3 = new Promise((resolve, reject) => {
11 setTimeout(resolve, 100, 'foo');
12 });
13 
14 Promise.all([p1, p2, p3]).then((result) => {
15   console.log(result) // ['成功了p1', '成功了p2', 'foo']
16 }).catch((error) => {
17 })

Promise.all 在任意一个传入的 promise 失败时返回失败。例如，如果你传入的 promise中，有四个 promise 在一定的时间之后调用成功函数，有一个立即调用失败函数，那么 Promise.all 将立即变为失败。

 1 var p1 = new Promise((resolve, reject) => {
 2   setTimeout(resolve, 1000, 'one');
 3 });
 4 var p2 = new Promise((resolve, reject) => {
 5   setTimeout(resolve, 2000, 'two');
 6 });
 7 var p3 = new Promise((resolve, reject) => {
 8   reject('reject');
 9 });
10 
11 Promise.all([p1, p2, p3]).then(values => {
12   console.log(values);
13 }).catch(reason => {
14   console.log(reason)
15 });