vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
需求:
上傳多個(gè)文件,每上傳一個(gè)文件異步請求一下后臺接口,并返回一個(gè)新文件名,等把所有的異步接口執(zhí)行成功后,將上傳已成功后新文件名數(shù)組得到再去更新業(yè)務(wù)數(shù)據(jù)
uni-file-picker 文件上傳組件的配置

選擇文件后,上傳到服務(wù)器后端,一個(gè)一個(gè)的傳,等異步執(zhí)行完一下再執(zhí)行下一個(gè)

上傳到后端的方法

執(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)文章
vue3:vue2中protoType更改為config.globalProperties問題
這篇文章主要介紹了vue3:vue2中protoType更改為config.globalProperties問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
Vue2利用Axios發(fā)起請求的詳細(xì)過程記錄
有很多時(shí)候你在構(gòu)建應(yīng)用時(shí)需要訪問一個(gè)API并展示其數(shù)據(jù),做這件事的方法有好幾種,而使用基于promise的HTTP客戶端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關(guān)于Vue2利用Axios發(fā)起請求的詳細(xì)過程,需要的朋友可以參考下2021-12-12
VUE項(xiàng)目運(yùn)行npm install報(bào)錯(cuò)問題以及解決
在運(yùn)行Vue項(xiàng)目時(shí)遇到npm安裝錯(cuò)誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運(yùn)行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項(xiàng)目目錄下運(yùn)行2024-10-10
Vite+Vue3使用MockJS的實(shí)現(xiàn)示例
寫一些純前端的項(xiàng)目時(shí),自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡單的數(shù)據(jù),來滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-01-01
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06

