await 与 Promise.all 结合使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了await 与 Promise.all 结合使用相关的知识,希望对你有一定的参考价值。

参考技术A 当遇到多个可以同时执行的异步任务时,就需要使用 Promise.all 。

Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

Promise.all 方法接受一个数组作为参数,p1、p2、p3 都是 Promise 实例,如果不是,就会先调用 Promise.resolve 方法,将参数转为 Promise 实例,再进一步处理。(Promise.all 方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。)

而 async/await 本身就是 promise 的语法糖,因此可以与 Promise.all 结合使用:

promise/axios async/await使用方法汇总

promise与axios结合使用

1.创建公共请求

 promiseFunc: (url) => {
// 返回一个promise对象
    return new Promise((resolve, reject) => {
      axios({
            url: url
            method: 'post',
            data: {
            }
          })
            .then((res) => {
              //此处为请求成功数据
              resolve(res.data);
            })
            .catch(error => {
              //此处为请求失败数据
              reject(error);
            });
    });
  }

2.调用公共请求方法

this.promiseFunc(url).then((res) => {
    //成功
    console.log(res.data);
}).catch(error => {
    //失败
    console.log(error);
});

promise请求进行多次回调

1.promise 链式请求

//promise then方法返回的是一个全新的promise对象
promiseFunc: () => {
    new Promise((resolve, reject) => {
      setTimeout(() => {
         resolve()
      },1000)
   })
}
promiseFunc().then(promiseFunc())
             .then(promiseFunc())
             .then(promiseFunc())
             .then(promiseFunc());

2.使用promise.all

注意:只要有一个接口失败了,则会先返回失败的数据。只有所有接口都成功时才会返回一个数组

let p1 = new Promise((resolve,reject) => {
   resolve()
})
let p2 = new Promise((resolve,reject) => {
   resolve()
})
let p3 = new Promise((resolve,reject) => {
    resolve()
 }) 
Promise.all([p1, p2, p3]).then(res => {
    console.log(res)  
}).catch(err => {
    console.log(err)
})

3.使用promise.race

注意:会返回最先获取成功的数据,拿个快就先返回哪个,无论成功还是失败

let p1 = new Promise((resolve,reject) => {
   resolve()
})
let p2 = new Promise((resolve,reject) => {
   resolve()
})
let p3 = new Promise((resolve,reject) => {
    resolve()
 }) 
Promise.race([p1, p2, p3]).then(res => {
    console.log(res)  
}).catch(err => {
    console.log(err)
})

结合async/await进行多次回调

当一个方法前面加了async,那么它就变成了一个异步方法
await会阻塞进程,等上一个执行完毕,再执行下一个

async function a1() {
   return res;
}
async function a2() {
   return res;
}
let a1 = await a1();
let a2 = await a2();
console.log(a1, a2)

以上是关于await 与 Promise.all 结合使用的主要内容,如果未能解决你的问题,请参考以下文章

promise/axios async/await使用方法汇总

promise,async await,try catch的问题整理

Promise.all() 与等待

await Promise.all() 和多个 await 之间有啥区别?

循环 await Promise.all 内存泄漏

async/await实现Promise.all()