vue请求如何按顺序执行

丿BAIKAL巛2023-12-01 20:46

我们有时候会碰到这种情况，需要连续发送两个请求，第二个请求需要用第一个请求的某个返回值作为参数来作为第二个请求的请求参数。

但是存在一个问题：两个请求都是异步的，他并不按照我们期望的先后顺序来执行。

这时候就需要控制请求的执行顺序，这里我提供一种方法来实现请求的顺序控制，我认为这个方法写起来是最简单最容易理解的。（当然其他方法有很多，还有async和await关键字等）

书写格式：

首先是正常发送第一次请求，然后在第一次请求的回调函数then中，写一句return 来发送第二次请求。

再.then，这里的返回结果就是第二次请求的结果。

这样我们就实现了两个请求的顺序执行。

js 复制代码

      first().then(response1 => {
        //第一次请求
        this.form = response1.data;
        console.log("第一次请求")
        //发送第二次请求
        return second(this.form.Code);
      }).then(response2 => {
      	console.log("第二次请求")
        //处理第二次请求返回结果
        this.queryParams=response2.data
      })

实际使用示例：

js 复制代码

      getLastDataByUnifiedNumber(this.form.unifiedNumber).then(response1 => {
        //第一次请求查询采样表数据
        this.form = response1.data;
        this.form.address = this.form.provinceName + this.form.cityName + this.form.countyName;
        this.queryParams=this.form;
        return getListBySamplingCode(this.form.samplingCode);

      }).then(response2 => {
        //第二次请求查询测试结果数据
        this.form2 = response2.rows[0];
        if(this.form2){
          this.queryParams.alkaliHydrolyzedNitrogenFirst=this.form2.alkaliHydrolyzedNitrogenFirst;
          this.queryParams.availablePhosphorusFirst=this.form2.availablePhosphorusFirst;
          this.queryParams.availableKFirst=this.form2.availableKFirst;
          this.queryParams.organicMatterFirst=this.form2.organicMatterFirst;
        }

      })