vue请求如何按顺序执行

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

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

这时候就需要控制请求的执行顺序,这里我提供一种方法来实现请求的顺序控制,我认为这个方法写起来是最简单最容易理解的。(当然其他方法有很多,还有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;
        }

      })
相关推荐
萌新小码农‍4 分钟前
Vue集成MarkDown
前端·javascript·vue.js
前端小巷子11 分钟前
深入理解XSS攻击
前端·安全·面试
mgx_71816 分钟前
windows指定某node及npm版本下载
前端·npm·node.js
Korloa16 分钟前
浅谈npm,cnpm,pnpm,npx,nvm,yarn之间的区别
前端·npm·node.js
DoraBigHead30 分钟前
作用域链与执行上下文的地下迷宫
前端·javascript·面试
0wioiw01 小时前
Flutter基础(前端教程⑧-数据模型)
前端·flutter·状态模式
一笑code1 小时前
UC浏览器PC版自2016年后未再更新不支持vue3
前端·vue
好记性不如2 小时前
在前端项目中是如何解决跨域的
前端
前端 贾公子8 小时前
pnpm 的 resolution-mode 配置 ( pnpm 的版本解析)
前端
伍哥的传说9 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架