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

 更新时间:2023年12月01日 09:00:48   作者:我是唐赢  
在Vue中可以使用异步函数和await关键字来控制上一步执行完再执行下一步,这篇文章主要给大家介绍了关于vue async await promise等待异步接口执行完毕再进行下步操作的相关资料,需要的朋友可以参考下

需求:

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

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

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

上传到后端的方法

执行效果

代码:

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

总结

到此这篇关于vue async await promise等待异步接口执行完毕再进行下步操作的文章就介绍到这了,更多相关vue async await promise操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中强制组件重新渲染的正确方法

    Vue中强制组件重新渲染的正确方法

    这篇文章主要介绍了Vue中强制组件重新渲染的正确方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 在Vue2中注册全局组件的两种方法详解

    在Vue2中注册全局组件的两种方法详解

    这篇文章主要介绍了在Vue2中注册全局组件的两种方法,非常的细致,需要的朋友可以参考下
    2022-07-07
  • vue3:vue2中protoType更改为config.globalProperties问题

    vue3:vue2中protoType更改为config.globalProperties问题

    这篇文章主要介绍了vue3:vue2中protoType更改为config.globalProperties问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue2利用Axios发起请求的详细过程记录

    Vue2利用Axios发起请求的详细过程记录

    有很多时候你在构建应用时需要访问一个API并展示其数据,做这件事的方法有好几种,而使用基于promise的HTTP客户端axios则是其中非常流行的一种,这篇文章主要给大家介绍了关于Vue2利用Axios发起请求的详细过程,需要的朋友可以参考下
    2021-12-12
  • VUE项目运行npm install报错问题以及解决

    VUE项目运行npm install报错问题以及解决

    在运行Vue项目时遇到npm安装错误可使用命令npminstall--legacy-peer-deps解决,若VsCode中无法运行npm命令,则可能是IDE配置未生效,可尝试重启电脑或使用cmd命令行直接在项目目录下运行
    2024-10-10
  • Vue实现本地购物车功能

    Vue实现本地购物车功能

    这篇文章主要为大家详细介绍了Vue实现本地购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue3.0实现下拉菜单的封装

    vue3.0实现下拉菜单的封装

    这篇文章主要为大家详细介绍了vue3.0实现下拉菜单的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue实现简单瀑布流布局

    vue实现简单瀑布流布局

    这篇文章主要为大家详细介绍了vue实现简单瀑布流布局,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Vite+Vue3使用MockJS的实现示例

    Vite+Vue3使用MockJS的实现示例

    写一些纯前端的项目时,自己造数据有些麻烦,于是我们可以利用mock造一些简单的数据,来满足我们的需求,本文主要介绍了Vite+Vue3使用MockJS的实现示例,感兴趣的可以了解一下
    2024-01-01
  • Vue3 去除 vue warn 及生产环境去除console.log的方法

    Vue3 去除 vue warn 及生产环境去除console.log的方法

    这篇文章主要介绍了Vue3 去除 vue warn 及生产环境去除console.log的方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06

最新评论