快捷導(dǎo)航

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

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

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

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

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

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

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

實際使用示例：

      getLastDataByUnifiedNumber(this.form.unifiedNumber).then(response1 => {
        //第一次請求查詢采樣表數(shù)據(jù)
        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 => {
        //第二次請求查詢測試結(jié)果數(shù)據(jù)
        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;
        }
      })

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

您可能感興趣的文章: