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操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vuex中的5个属性使用方法举例讲解

    vuex中的5个属性使用方法举例讲解

    vuex是专门为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex中5个属性使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue从使用到源码实现教程详解

    vue从使用到源码实现教程详解

    这篇文章主要介绍了vue从使用到源码实现的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解vue父子组件状态同步的最佳方式

    详解vue父子组件状态同步的最佳方式

    这篇文章主要介绍了vue父子组件状态同步的最佳方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 在vue中使用console.log无效的解决

    在vue中使用console.log无效的解决

    这篇文章主要介绍了在vue中使用console.log无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • el-form的model、prop属性和表单校验等使用

    el-form的model、prop属性和表单校验等使用

    本文主要介绍了el-form的model、prop属性和表单校验等使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 关于iview按需引用后使用this.$Modal报错的解决

    关于iview按需引用后使用this.$Modal报错的解决

    这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 自定义vue全局组件use使用、vuex的使用详解

    自定义vue全局组件use使用、vuex的使用详解

    本篇文章主要介绍了自定义vue全局组件use使用、vuex的使用详解,本文主要来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理
    2017-06-06
  • vue项目热更新的坑及解决

    vue项目热更新的坑及解决

    这篇文章主要介绍了vue项目热更新的坑及解决方案,具有很好的参考价值,希望对的大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue脚手架搭建项目的兼容性配置详解

    vue脚手架搭建项目的兼容性配置详解

    这篇文章主要介绍了vue脚手架搭建项目的兼容性配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 安装vue/cli后查看版本显示找不到vue指令的解决

    安装vue/cli后查看版本显示找不到vue指令的解决

    这篇文章主要介绍了安装vue/cli后查看版本显示找不到vue指令的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论