场景需求:
  1. 一个接口的参数会需要使用另一个接口获取
  2. 两个接口同时请求完数据加载页面
解决方案:(axios处理并发请求的助手函数)
  1. axios.all(接口1, 接口2)
  2. axios.spread(callback1, callback2)

1、引入接口

import axios from "axios"
import {getSellerDetail} from '../../api/seller'
import {getMemberCardInfo} from '../../api/pay_online/index'  

2、处理数据

created(){
    if (this.$route.query.type){
        this.type = this.$route.query.type;
        this.sellerId = this.$route.query.targetId;
        this.initApi()
    }
},
methods: {
    initApi(){
        axios.all([
            getSellerDetail(this.sellerId),
            getMemberCardInfo(this.sellerId, this.payMoney)
        ]).then(axios.spread((sellerDetail, memberCardInfo) => {
            this.loading = false;
            // 商户信息
            this.detail = sellerDetail.data.detail;
            this.sellerPic = this.detail.picture;
            this.sellerName = this.detail.name;
            this.discount = this.detail.discount;
            // 会员卡信息
            this.cardDetail = memberCardInfo.data;
            this.balance = this.cardDetail.balance;  //余额
            this.rechargeTip = this.cardDetail.rechargeTip;  // 付款金额提示充值
        }))
    }
}

3、接口返回:

console.log(sellerDetail.data)
console.log(memberCardInfo.data)接口返回

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐