阅读 236

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实例,获取数据
    1. 并把数据传递给处理函数resolve和reject
    1. 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 无论一个任务正常或者异常,都会返回对应的的状态,可以解决上述问题
文章分类
前端
文章标签