vue 一个方法同时请求多个接口，怎么控制顺序？在下一个接口获取前一个接口返回的值为空，怎么解决

最新推荐文章于 2023-06-09 09:15:22 发布

keeper42

最新推荐文章于 2023-06-09 09:15:22 发布

阅读量2.6k

点赞数

分类专栏： js 文章标签： vue

原文链接：https://blog.csdn.net/weixin_39818813/article/details/82464132

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

需求：

在点击一个按钮的时候，需要请求接口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 {
 
          }
        });