vue async await promise 等待异步接口执行完毕再进行下一步操作

这篇具有很好参考价值的文章主要介绍了vue async await promise 等待异步接口执行完毕再进行下一步操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：上传多个文件，每上传一个文件异步请求一下后台接口，并返回一个新文件名，等把所有的异步接口执行成功后，将上传已成功后新文件名数组得到再去更新业务数据

uni-file-picker 文件上传组件的配置

vue 等待异步完成,vue.js,vue.js,javascript,前端,Powered by 金山文档

选择文件后，上传到服务器后端，一个一个的传，等异步执行完一下再执行下一个

上传到后端的方法

执行效果

代码：

        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");
                     }   
                })
            })
        },

如果觉得文章对您有用，可以收藏本文和关注本人，后续会将工作中遇到的一些技术问题写成文档，一起共同讨论学习！文章来源地址https://www.toymoban.com/news/detail-521116.html

到了这里，关于vue async await promise 等待异步接口执行完毕再进行下一步操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！