vue项目中axios并发请求(axios.all & axios.spread)
场景需求:一个接口的参数会需要使用另一个接口获取两个接口同时请求完数据加载页面解决方案:(axios处理并发请求的助手函数)axios.all(接口1, 接口2)axios.spread(callback1, callback2)1、引入接口import axios from "axios"import {getSellerDetail} from '../../api/s...
·
场景需求:
- 一个接口的参数会需要使用另一个接口获取
- 两个接口同时请求完数据加载页面
解决方案:(axios处理并发请求的助手函数)
axios.all
(接口1, 接口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)
更多推荐
已为社区贡献1条内容
所有评论(0)