问题描述
微信小程序端需要发送一个包含文字与图片的表单数据给后端，我一开始的思路是先上传图片得到临时的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()
}
})
}
})
},总结
除非必要时候，否则尽量使用同步方法，即顺序执行程序，避免使用异步方法造成不必要的隐患问题，这样的BUG是由于程序执行速度不一致导致的，并不是代码本身的错误，因此非常非常的难找。
参考文章
微信小程序同步方法与异步方法对比https://blog.csdn.net/hxfghgh/article/details/82817943?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167544181616800182143390%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167544181616800182143390&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-82817943-null-null.142^v73^pc_new_rank,201^v4^add_ask,239^v1^control&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%8C%E6%AD%A5%E4%B8%8E%E5%BC%82%E6%AD%A5&spm=1018.2226.3001.4187微信小程序（API---简介、运行机制及同步异步）https://blog.csdn.net/weixin_45343973/article/details/100977882?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%8C%E6%AD%A5%E4%B8%8E%E5%BC%82%E6%AD%A5&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-100977882.142^v73^pc_new_rank,201^v4^add_ask,239^v1^control&spm=1018.2226.3001.4187
道阻且长，多踩坑才能成长！文章来源：https://www.toymoban.com/news/detail-591810.html
文章来源地址https://www.toymoban.com/news/detail-591810.html
到了这里，关于巧用回调函数解决微信小程序与后台数据交互出现的异步问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
