This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

Personal technical blog, wechat official account, video account and design portfolio of the blogger

Scenario requirements:

  1. Five interfaces need to be requested simultaneously
  2. After all requests are successful, go to the next step

Solution:

  1. Define a variable I =5, request a successful interface, let I –, until I =0 to perform the next operation, otherwise do not execute
  2. axios.allFor concurrent requests,.then(axios.spread(function(callback1, callback2)){})
  3. promise.allThen (function([callback1, callback2]){})

1. Callback to hell:

  • Functions are nested as parameters
  • Substitute for.thenChain operation

2, promise.all Concurrent requests

  • Promise.allWait for all to complete (or the first to fail)
  • Its reject callback is executed as soon as any input promise’s reject callback is executed or an invalid promise is entered, and reject is the first error message thrown
  • Introducing related interfaces
import {getSellerDetail} from '.. /.. /api/seller'
import {getMemberCardInfo} from '.. /.. /api/pay_online/index' 
Copy the code
  • The data processing
    1. Create a Promise instance and fetch the data
    1. And pass the data to the resolve and reject handlers
    1. Promise implemented ** at the time of the announcement
created(){
    if (this.$route.query.type){
        this.type = this.$route.query.type;
        this.sellerId = this.$route.query.targetId;
        this.initApi()
    }
},
methods: {
    initApi(){
        '// Merchant information'
        let SellerDetailApi = new Promise((resolve, reject) = > {
            getSellerDetail(this.sellerId).then( res= > {
                resolve(res)   // resolve(res.data)
            }).catch( err= > {
                reject(res)
            })
        })
        '// Membership card information'
        let MemberCardInfoApi = new Promise((resolve, reject) = > {
            getMemberCardInfo(this.sellerId, this.payMoney).then( res= > {
                resolve(res)  // resolve(res.data)
            }).catch( err= > {
                reject(res)
            })
        })
        '// Promise all method, wait for all Promise objects in the array to complete execution
        Promise.all([SellerDetailApi, MemberCardInfoApi]).then( res= > {
            this.loading = false;
            // Business information
            this.detail = res[0].data.detail;
            this.sellerPic = this.detail.picture;
            this.sellerName = this.detail.name;
            this.discount = this.detail.discount;
            // Membership card information
            this.cardDetail = res[1].data;
            this.balance = this.cardDetail.balance;  / / the balance
            this.rechargeTip = this.cardDetail.rechargeTip;  // Payment amount prompt recharge
        }).catch( err= > {
            console.log(err)
        })
    }
}
Copy the code

3, the interface returns:

Console. log(res) in promise.all returns an array

4. Note:

  • Promise. All defectsIf one of the tasks has an exception (REJECT), all the tasks die and the Promise goes directly into the REJECT state to the catch callback.
  • Promise.allSettledNo matter whether a task is normal or abnormal, the corresponding status is returned, which can solve the above problems