vue請求按順序執(zhí)行的示例詳解

更新時間：2023年12月04日 11:21:00 作者：丿BAIKAL巛

我們有時候會碰到這種情況，需要連續(xù)發(fā)送兩個請求，第二個請求需要用第一個請求的某個返回值作為參數來作為第二個請求的請求參數，這篇文章主要介紹了vue請求如何按順序執(zhí)行,需要的朋友可以參考下

我們有時候會碰到這種情況，需要連續(xù)發(fā)送兩個請求，第二個請求需要用第一個請求的某個返回值作為參數來作為第二個請求的請求參數。
但是存在一個問題：兩個請求都是異步的，他并不按照我們期望的先后順序來執(zhí)行。
這時候就需要控制請求的執(zhí)行順序，這里我提供一種方法來實現(xiàn)請求的順序控制，我認為這個方法寫起來是最簡單最容易理解的。（當然其他方法有很多，還有async和await關鍵字等）

書寫格式：
首先是正常發(fā)送第一次請求，然后在第一次請求的回調函數then中，寫一句return 來發(fā)送第二次請求。
再.then，這里的返回結果就是第二次請求的結果。

這樣我們就實現(xiàn)了兩個請求的順序執(zhí)行。

      first().then(response1 => {
        //第一次請求
        this.form = response1.data;
        console.log("第一次請求")
        //發(fā)送第二次請求
        return second(this.form.Code);
      }).then(response2 => {
      	console.log("第二次請求")
        //處理第二次請求返回結果
        this.queryParams=response2.data
      })

實際使用示例：

      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;
        }
      })

到此這篇關于vue請求如何按順序執(zhí)行的文章就介紹到這了,更多相關vue請求按順序執(zhí)行內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: