vue项目中promise解决回调地狱和并发请求

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

博主相关个人技术博客、微信公众号、视频号、设计作品集

场景需求：

1. 需要同时请求5个接口
2. 都请求成功后执行下一步操作

解决方法：

1. 定义一个变量i=5，请求成功一个接口，让i–，直到i=0时执行下一个操作，否则不执行
2. axios.all 并发请求，.then(axios.spread(function(callback1, callback2)){})
3. promise.all 并发请求，.then(function([callback1, callback2]){})

1、回调地狱：

• 函数作为参数层层嵌套
• 代替的为.then的链式操作

2、promise.all并发请求

• Promise.all 等待所有都完成（或第一个失败）
• 它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息

• 引入相关接口

import {getSellerDetail} from '../../api/seller'
import {getMemberCardInfo} from '../../api/pay_online/index' 
复制代码

• 数据处理

• 1. 创建一个Promise实例，获取数据
• 2. 并把数据传递给处理函数resolve和reject
• 3. promise在声明时就执行了**

created(){
    if (this.$route.query.type){
        this.type = this.$route.query.type;
        this.sellerId = this.$route.query.targetId;
        this.initApi()
    }
},
methods: {
    initApi(){
        `// 商户信息`
        let SellerDetailApi = new Promise((resolve, reject) => {
            getSellerDetail(this.sellerId).then( res => {
                resolve(res)   // resolve(res.data)
            }).catch( err => {
                reject(res)
            })
        })
        `// 会员卡信息`
        let MemberCardInfoApi = new Promise((resolve, reject) => {
            getMemberCardInfo(this.sellerId, this.payMoney).then( res => {
                resolve(res)  // resolve(res.data)
            }).catch( err => {
                reject(res)
            })
        })
        `// Promise的all方法，等数组中的所有promise对象都完成执行`
        Promise.all([SellerDetailApi, MemberCardInfoApi]).then( res => {
            this.loading = false;
            // 商户信息
            this.detail = res[0].data.detail;
            this.sellerPic = this.detail.picture;
            this.sellerName = this.detail.name;
            this.discount = this.detail.discount;
            // 会员卡信息
            this.cardDetail = res[1].data;
            this.balance = this.cardDetail.balance;  //余额
            this.rechargeTip = this.cardDetail.rechargeTip;  // 付款金额提示充值
        }).catch( err => {
            console.log(err)
        })
    }
}
复制代码

3、接口返回：

promise.all中console.log(res) 返回的是数组

4、注意：

• Promise.all 缺陷 如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入 reject 状态至catch回调。
• Promise.allSettled 无论一个任务正常或者异常，都会返回对应的的状态，可以解决上述问题