vue實(shí)現(xiàn)2個(gè)接口同步執(zhí)行方式
更新時(shí)間：2025年08月01日 09:26:36 作者：cc蒲公英
案例1使用async/await結(jié)合Promise.all實(shí)現(xiàn)并行接口調(diào)用,案例2通過(guò)async/await順序執(zhí)行確保數(shù)據(jù)依賴(lài),兩種方式適用于不同場(chǎng)景,合理選擇可提升效率
vue2個(gè)接口同步執(zhí)行方式
案例1
// 接口1的請(qǐng)求
const promise1 = axios.get('/api/data1')
// 接口2的請(qǐng)求
const promise2 = axios.get('/api/data2')
// 同步執(zhí)行兩個(gè)接口
Promise.all([promise1, promise2]).then(results =>{
// 對(duì)兩個(gè)接口返回的數(shù)據(jù)進(jìn)行操作
const result1 = results[0].data
const result2 = results[1].data
// ...
}).catch(error =>{
// 處理錯(cuò)誤
})案例2
function fn(){
return new Promise((resolve,reject)=>{
let randomNum = parseInt(Math.random()*6+1);
console.log(randomNum);
if(randomNum>3){
resolve('買(mǎi)');
}
else{
reject('不買(mǎi)');
}
})
}
Promise.all([fn(),fn()]).then((x)=>{console.log(x,'success')},(y)=>{console.log(y,'error');});總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE div click無(wú)效的問(wèn)題及解決
這篇文章主要介紹了VUE div click無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
element?el-tooltip實(shí)現(xiàn)自定義修改樣式
本文主要介紹了element?el-tooltip實(shí)現(xiàn)自定義修改樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue或者React項(xiàng)目配置@路徑別名及智能提示方案
這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法
這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法,這個(gè)錯(cuò)誤是因?yàn)閂ue不能加載本地資源的原因,需要的朋友可以參考下2023-07-07
vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式
vuex是大家使用vue時(shí)大多數(shù)都會(huì)選擇的,但是當(dāng)頁(yè)面刷新之后vuex數(shù)據(jù)會(huì)丟失,下面這篇文章主要給大家介紹了關(guān)于vuex頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題的四種解決方式,需要的朋友可以參考下2022-02-02
Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用
這篇文章主要介紹了Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了如何定義地圖容器及操作按鈕,使用高德地圖API進(jìn)行軌跡繪制及播放的方法,并強(qiáng)調(diào)了界面樣式的重要性,高德地圖API的使用需要注冊(cè)獲取key,并且設(shè)置了地圖容器的大小,需要的朋友可以參考下2024-11-11