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

Posted 2021-09-10 萧紫陌

方法汇总

• promise与axios结合使用
• • 1.创建公共请求
  • 2.调用公共请求方法
• promise请求进行多次回调
• • 1.promise 链式请求
  • 2.使用promise.all
  • 3.使用promise.race
• 结合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)