vue axios 同時併發請求資料

2021-09-25 03:51:00 字數 1428 閱讀 9084

場景,操作 el-form 表單資料時,需要同時請求多條資料,如el-select、el-cascader的資料。

新建時請求資料倒是無所謂,修改的時候請求的稍微有點問題(請求時間長,但是資料先繫結到表單,請求返回之後就會出現繫結了id值,而不是name)

如果是一層一層的巢狀,肯定是打腦殼的。所以我們需要乙個併發的請求。

在網上學習了阮一峰老師的教程之後,找到了三種解決方式。目前只是粗略學,熟練還需要實際磨鍊

作為自己的學習筆記  先記下來 後面工作遇到了,在測試實用效果

阮老師的  es6入門

1.promise

promise.then.then...   有點反反覆覆

promise.all()    這個可以 但是自身api佔了不少  所以對邏輯反而不太明確

2.generator  

類似乙個容器,裡面儲存著某個未來才會結束的事情(乙個非同步事件)。

從語法上來看,是乙個物件,可以獲取非同步操作的訊息、

稍微有點打腦殼(菜鳥表示不會用)

3.async 這個很棒棒

//使用async  await後跟的是promise 需要 return

async function getdatas()

getdatas().then(res => 拿到結果

})//不使用時 ...

//先請求兩個 getdata

this.getdata()

this.getsubjecttree(data[0].school_id);

//然後在請求 拿到資料處理之後 再繼續

querysubject(data[0].id).then(res => ).then(res => , data[0]);

this.revisingform.organization_id = res.data.data.organization_ids

this.revisingform.subjects = _subjects;

if(this.rolelist && this.rolelist.length) }})

}});

上面的是 完全無關的請求  需要同時請求的 可以promise.all  

如果是有關聯的,就這樣

//阮一峰老師教程裡的例子

async function getstockpricebyname(name)

getstockpricebyname('goog').then(function (result) );

完  

不想成api工程師,自己在前端的路上且行且珍惜。閒下來必須去推敲自己工作時遇到的困難,

還有**寫的不好的地方,一定要提公升自己的**質量。同時也要磨鍊開發思維,不管什麼框架,語言

只是實現需求的方法,最重要的還是開發思維

JS控制併發請求數量

原理 使用乙個佇列維護所有的請求,然後使用async await或者promise對請求進行控制,當前面的請求完成就從佇列 隊下乙個請求 class limitresquest request reqfn this.requests.push reqfn if this.currentsum thi...

vue axios 請求封裝

import axios from axios import router from router index import from element ui import from utils loading import from utils auth import qs from qs 引入qs...

封裝vue axios請求

util.js import axios from axios import qs from qs import from vant h5用的這個 const apiurl xx 訪問介面位址 設定超時時間 請求頭等 axios.defaults.timeout 30000 axios.defaul...