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 });