vue-axios同時(shí)請(qǐng)求多個(gè)接口 等所有接口全部加載完成再處理操作
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
Axios.all([request1, request2, request3])
.then(
Axios.spread((area, acct, perms) => {
console.log('全部加載完成')
})
)
.catch(err => {
console.log(err.response)
});
需要在當(dāng)前路由引入axios
import Axios from "axios";
補(bǔ)充知識(shí)：vue，axios處理同一個(gè)接口多次訪問(wèn)的執(zhí)行順序問(wèn)題
碰到個(gè)問(wèn)題記錄一下，就是axios同時(shí)多次請(qǐng)求同一個(gè)接口（參數(shù)不同）導(dǎo)致數(shù)據(jù)混亂的問(wèn)題，就是先點(diǎn)擊A，馬上再點(diǎn)擊B，結(jié)果A請(qǐng)求數(shù)據(jù)的速度比B的慢，導(dǎo)致，展示數(shù)據(jù)的時(shí)候B的結(jié)果先出來(lái)，又馬上閃成A請(qǐng)求的數(shù)據(jù)了。這里有一種解決辦法，在點(diǎn)擊新的接口請(qǐng)求時(shí)，關(guān)閉之前正在pending的接口請(qǐng)求。
在已經(jīng)封裝好的axios方法里面，加上紅框中代碼，然后再在你需要的vue文件方法里面加上如下代碼
這樣你每點(diǎn)擊一個(gè)事件觸發(fā)新的請(qǐng)求時(shí)，之前仍在pending的請(qǐng)求就會(huì)被強(qiáng)制關(guān)閉了
以上這篇vue-axios同時(shí)請(qǐng)求多個(gè)接口 等所有接口全部加載完成再處理操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 基于axios請(qǐng)求封裝的vue應(yīng)用實(shí)例代碼
- Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）
- Vue3+TypeScript封裝axios并進(jìn)行請(qǐng)求調(diào)用的實(shí)現(xiàn)
- vue中axios封裝使用的完整教程
- vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理
- vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別
- Vue3配置axios跨域?qū)崿F(xiàn)過(guò)程解析
- Vue項(xiàng)目利用axios請(qǐng)求接口下載excel
- 如何用vue封裝axios請(qǐng)求
相關(guān)文章
ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例
本文主要介紹了ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
在vue中給后臺(tái)接口傳的值為數(shù)組的格式代碼
這篇文章主要介紹了在vue中給后臺(tái)接口傳的值為數(shù)組的格式代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue中動(dòng)態(tài)引入圖片要是require的原因解析
require是一個(gè)node方法，用于引入模塊，JSON或本地文件，這篇文章主要介紹了vue中動(dòng)態(tài)引入圖片為什么要是require,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Javascript結(jié)合Vue實(shí)現(xiàn)對(duì)任意迷宮圖片的自動(dòng)尋路
本文將結(jié)合實(shí)例代碼介紹Javascript結(jié)合Vue實(shí)現(xiàn)對(duì)任意迷宮圖片的自動(dòng)尋路，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue中element 的upload組件發(fā)送請(qǐng)求給后端操作
這篇文章主要介紹了vue中element 的upload組件發(fā)送請(qǐng)求給后端操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
本文給大家分享vue自定義組件的四種方式，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-02-02
這篇文章主要給大家介紹了關(guān)于vue組件入門(mén)知識(shí)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場(chǎng)景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11