vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
更新時間：2023年12月01日 09:00:48 作者：我是唐贏
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下
需求：
上傳多個文件，每上傳一個文件異步請求一下后臺接口，并返回一個新文件名，等把所有的異步接口執(zhí)行成功后，將上傳已成功后新文件名數(shù)組得到再去更新業(yè)務(wù)數(shù)據(jù)
uni-file-picker 文件上傳組件的配置
選擇文件后，上傳到服務(wù)器后端，一個一個的傳，等異步執(zhí)行完一下再執(zhí)行下一個
上傳到后端的方法
執(zhí)行效果
代碼：
async selectFile(e) {
let files = [];
for (let i = 0; i < e.tempFilePaths.length; i++) {
let resultstr = await this.uploadFiles(e.tempFilePaths,i);
let result = JSON.parse(resultstr);
files.push(result.result.files);
}
console.log("finish>>>>>",files);
}, async uploadFiles(tempFilePaths,i){
return new Promise((resolve, reject) => {
uni.uploadFile({
url: "http://localhost:8180/api/business/inStoreApproval/uploadPlus", //后端用于處理圖片并返回圖片地址的接口
filePath: tempFilePaths[i],
name: 'file',
header: {
"X-Access-Token": Vue.prototype.$token,
"X-Requested-With":"XMLHttpRequest",
"tenant_id":0
},
success: res => {
console.log(res.data);
resolve(res.data)
},
fail: () => {
reject(err)
console.log("err");
}
})
})
},總結(jié)
到此這篇關(guān)于vue async await promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的文章就介紹到這了,更多相關(guān)vue async await promise操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中強制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了在Vue2中注冊全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下2022-07-07
vue3:vue2中protoType更改為config.globalProperties問題
這篇文章主要介紹了vue3:vue2中protoType更改為config.globalProperties問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2利用Axios發(fā)起請求的詳細(xì)過程記錄
有很多時候你在構(gòu)建應(yīng)用時需要訪問一個API并展示其數(shù)據(jù),做這件事的方法有好幾種,而使用基于promise的HTTP客戶端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關(guān)于Vue2利用Axios發(fā)起請求的詳細(xì)過程,需要的朋友可以參考下2021-12-12
在運行Vue項目時遇到npm安裝錯誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項目目錄下運行2024-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)本地購物車功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
寫一些純前端的項目時,自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡單的數(shù)據(jù),來滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實現(xiàn)示例,感興趣的可以了解一下2024-01-01
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06