vue 一个方法同时请求多个接口,怎么控制顺序?在下一个接口获取前一个接口返回的值为空,怎么解决
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
需求:
在点击一个按钮的时候,需要请求接口s1将页面上的城市A转换为对应的城市三字码B,然后再用这个三字码B去请求另外一个接口s2,拿到返回信息C。
困境:
在实际项目中我发现,在接口s2中无法拿到接口S1中的B。我们可以在接口s1里面取到B的值,但是在外面无法取到。
分析:
应该是接口请求的顺序问题,运行过程中会优先请求S2,再请求S1,所以,在s2中取B的值时,此时,B还未赋值,所以为空。
解决:
控制代码的执行顺序,在S1的成功回调中调用S2
代码:
代码有点乱,没有封装,直接回调,将就着看吧,后期再封装
//通过每个航段的机场名字查询对应的城市名字--出发
request.post('/orderInfo/selectCityByAirport', {
airportName: this.alterlMsg.issueList[index].segmentList[index1].dAirportCName,//出发机场名字
language: "zh_CN",
}).then(response => {
var data = response.data;
if (data.code == 200) {
this.startAddressd = data.data.cityName+"/"+data.data.cityCode
this.cityCodef = data.data.cityCode;
//回调1
//通过每个航段的机场名字查询对应的城市名字--到达
request.post('/orderInfo/selectCityByAirport', {
airportName: this.alterlMsg.issueList[index].segmentList[index1].aAirportCName,//到达机场名字
language: "zh_CN",
}).then(response => {
var data = response.data;
if (data.code == 200) {
this.endAddressd =data.data.cityName+"/"+data.data.cityCode
this.cityCodet = data.data.cityCode
//单程城市和时间搜索
// this.RemoteStr(this.fromCity)
request.post('/searchFlight/searchAir', {
tripType: 1,//单程或往返程类型
// fromCity: this.startAddress,//出发城市
fromCity: this.cityCodef,//出发城市三子码
toCity: this.cityCodet,//到达城市三子码
// toCity: this.endAddress,//到达城市
fromDate: 20181004,//出发日期
adultNumber: 1,//成年人数量
childNumber: 0,//小孩数量
infantNumber: 0,//婴儿数量
language: "zh_CN",
}).then(response => {
var data = response.data;
if (data.code == 200) {
this.$Modal.info({
title: '查询中',
type: "success",
loading: true,
onOk: () => {
setTimeout(() => {
this.$Modal.remove();
this.$Message.success('查询成功');
}, 1000);
}
});
this.isBtnhas = true;
this.routings = response.data.data.routings;
this.redisSelectKey = response.data.data.redisSelectKey;
}
if (data.code == 50312) {
this.$Modal.warning({
title: "不好意思",
content: "航班无数据"
});
}
if (data.code !== 200 && data.code !== 50312) {
this.$Modal.error({
title: "查询失败",
content: "系统出错啦"
});
}
}
);
} else {
}
});
} else {
}
});




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:17 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)