巧用回调函数解决微信小程序与后台数据交互出现的异步问题

最新推荐文章于 2024-06-18 21:29:11 发布

Aricl.

最新推荐文章于 2024-06-18 21:29:11 发布

阅读量2.2k

点赞数

分类专栏： Bug千千万文章标签： BUG解决方案异步与同步微信小程序

本文链接：https://blog.csdn.net/qq_52487066/article/details/128878022

版权

Bug千千万专栏收录该内容

11 篇文章 7 订阅

订阅专栏

问题描述

微信小程序端需要发送一个包含文字与图片的表单数据给后端，我一开始的思路是先上传图片得到临时的URL，后执行POST请求将表单数据发送给后端，但后端只能获取到文字，而图片URL却始终获取不到。

问题原因

注意看我上面的思路，一先一后，无形中将两个操作进行异步执行了，顾名思义，两个行为分开同时执行，但是二者执行速度却不一致从而导致出错。因为图片的上传执行速度肯定比发送POST请求这一动作要慢一步，因为耗时长，还会受网络速度的影响。所以当后台已经收到小程序端发来的POST请求时，图片上传还未完成，因此URL就是空的，等到图片上传完成了拿到URL了，但此时POST请求早已执行完毕，二者相互错开，异步执行是问题的根本原因。

错误代码

//表单提交事件
        ReportFormData(e){
            wx.showLoading({
                title: '上传中',
              })
            this.setData({
                formdata:e.detail.value
            })
            this.uploadimg()//上传图片获取URL
            //向后端发送POST请求提交表单数据
            wx.request({
                url: 'http://localhost:8081/wx/hd/add',
                method:"POST",
                data:JSON.stringify({
                  "sbr":userid,
                  "yhdd":form.yhdd,
                  "yhbw":form.yhbw,
                  "yhms":form.yhms,
                  "yhzp":[{ "url":res3.fileList[0].tempFileURL}]
                }),
                header:{'content-type': 'application/json'},
                success:res=>{
                    wx.showToast({
                      title: '上传成功',
                    })
                    console.log(res);
                }
              })
        },
        //将用户上传的隐患照片上传到云数据库中进行存储
        uploadimg(){
            wx.cloud.uploadFile({
                //  使用随机生成数来为图片文件命名，极大避免文件名冲突问题
                cloudPath:`${Math.floor(Math.random()*10000000)}.png`,
                filePath:this.data.imgs[0],
                success:res2=>{
                    console.log(res2)
                    //获取图片的临时下载链接
                    wx.cloud.getTempFileURL({
                        fileList:[res2.fileID],
                        success:res3=>{
                            this.setData({
                                filepath:res3.fileList[0].tempFileURL
                            })
                            console.log("获取到的url地址为：",this.data.filepath)
                            wx.hideLoading()
                        }
                    })
                }
            })
            console.log("上传的图片",this.data.imgsfileIDs)
        },

解决方法

将二者进行同步操作，就是顺序执行，当图片上传完成拿到URL之后再去执行发送POST请求的操作，即后者执行的条件是前者执行完成，这样让后者“等一等”前者，这是解决问题的核心思路。我们这里采用的方法是在上传图片拿到URL后的回调函数中来执行POST请求，这样巧妙地利用了回调函数的特点解决了异步问题。

正确代码

       //表单提交事件
        ReportFormData(e){
            wx.showLoading({
                title: '上传中',
              })
            this.setData({
                formdata:e.detail.value
            })
            this.uploadimg()//上传图片获取URL
        },
         
        //将用户上传的隐患照片上传到云数据库中进行存储
        uploadimg(){
            wx.cloud.uploadFile({
                //  使用随机生成数来为图片文件命名，极大避免文件名冲突问题
                cloudPath:`${Math.floor(Math.random()*10000000)}.png`,
                filePath:this.data.imgs[0],
                success:res2=>{
                    console.log(res2)
                    //获取图片的临时下载链接
                    wx.cloud.getTempFileURL({
                        fileList:[res2.fileID],
                        success:res3=>{
                            let userid=getApp().globalData.userOpenID
                            let form=this.data.formdata
                            //向后端发送POST请求提交表单数据
                            wx.request({
                                url: 'http://localhost:8081/wx/hd/add',
                                method:"POST",
                                data:JSON.stringify({
                                  "sbr":userid,
                                  "yhdd":form.yhdd,
                                  "yhbw":form.yhbw,
                                  "yhms":form.yhms,
                                  "yhzp":[{ "url":res3.fileList[0].tempFileURL}]
                                }),
                                header:{'content-type': 'application/json'},
                                success:res=>{
                                    wx.showToast({
                                      title: '上传成功',
                                    })
                                    console.log(res);
                                }
                              })
                            this.setData({
                                filepath:res3.fileList[0].tempFileURL
                            })
                            console.log("获取到的url地址为：",this.data.filepath)
                            wx.hideLoading()
                        }
                    })
                }
            })
        },