vue實現(xiàn)2個接口同步執(zhí)行方式

更新時間：2025年08月01日 09:26:36 作者：cc蒲公英

案例1使用async/await結(jié)合Promise.all實現(xiàn)并行接口調(diào)用,案例2通過async/await順序執(zhí)行確保數(shù)據(jù)依賴,兩種方式適用于不同場景,合理選擇可提升效率

vue2個接口同步執(zhí)行方式

案例1

// 接口1的請求
const promise1 = axios.get('/api/data1')
// 接口2的請求
const promise2 = axios.get('/api/data2')
// 同步執(zhí)行兩個接口
Promise.all([promise1, promise2]).then(results =>{
// 對兩個接口返回的數(shù)據(jù)進(jìn)行操作
const result1 = results[0].data
const result2 = results[1].data
// ...
}).catch(error =>{
// 處理錯誤
})

案例2

function fn(){
    return new Promise((resolve,reject)=>{
        let randomNum = parseInt(Math.random()*6+1);
        console.log(randomNum);
        if(randomNum>3){
            resolve('買'); 
        }
        else{
            reject('不買');
        }
    })
}
 
Promise.all([fn(),fn()]).then((x)=>{console.log(x,'success')},(y)=>{console.log(y,'error');});

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3.0?axios跨域請求代理服務(wù)器配置方式
這篇文章主要介紹了Vue3.0?axios跨域請求代理服務(wù)器配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue.js 父子組件通信的十種方式
最近一直在做 Vue項目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧
2018-10-10
Vue3中使用監(jiān)聽器的具體實踐
監(jiān)聽器是Vue3中非常好用的一個特性,用于監(jiān)聽某個響應(yīng)式變量的變化,本文就來介紹一下Vue3中使用監(jiān)聽器的具體實踐,具有一定的參考價值,感興趣的可以了解一下
2023-12-12
vue單頁應(yīng)用加百度統(tǒng)計代碼（親測有效）
這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計代碼的解決方法，需要的朋友參考下吧
2018-01-01
Vue?Router路由hash模式與history模式詳細(xì)介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個按鈕需要跳轉(zhuǎn)到對應(yīng)的頁面，這就是路由跳轉(zhuǎn)
2022-08-08
Python實現(xiàn)圖片二值化的詳細(xì)代碼
圖像二值化就是將圖像上的像素點(diǎn)的“灰度值”設(shè)置為[0,?0,?0]或[255,?255,?255],即要么純黑,要么純白,這篇文章主要介紹了Python實現(xiàn)圖片二值化,需要的朋友可以參考下
2024-05-05
Vue報錯error:0308010C:digital?envelope?routines::unsupported
這篇文章主要給大家介紹了關(guān)于Vue報錯error:0308010C:digital?envelope?routines::unsupported的解決方法,文中通過圖文將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue.js仿微信聊天窗口展示組件功能
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下
2017-08-08
Vue左滑組件slider使用詳解
這篇文章主要為大家詳細(xì)介紹了Vue左滑組件slider的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
vue做移動端適配最佳解決方案(親測有效)
這篇文章主要介紹了vue做移動端適配最佳解決方案(親測有效)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09