欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?async?await?promise等待異步接口執(zhí)行完畢再進行下步操作教程

 更新時間：2023年12月01日 09:00:48   作者：我是唐贏  
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進行下步操作的相關(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í)行完畢再進行下步操作的文章就介紹到這了,更多相關(guān)vue async await promise操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論