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

2021-08-25 13:30:02 阅读：172 来源： 互联网

标签：axios res promiseFunc await resolve Promise reject promise

promise使用方法汇总

promise与axios结合使用
- 1.创建公共请求
- 2.调用公共请求方法
promise请求进行多次回调

promise与axios结合使用

1.创建公共请求

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

2.调用公共请求方法

this.promiseFunc(url).then(
  res => {
     // 成功
     console.log(res);      
  },
  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)
})

2.使用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)
})

3.结合使用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)

标签：axios,res,promiseFunc,await,resolve,Promise,reject,promise
来源： https://blog.csdn.net/zhangxxxq/article/details/119907109

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9