uniapp異步執行問題記錄
代碼執行過程中，調用其他函數，執行步驟異步執行
場景描述：
點擊按鈕向后台提交信息，所提交的信息中包含了圖片信息，需要先將圖片信息進行上傳到后端，后端保存圖片信息后返回圖片存儲的地址信息給前端，最后再執行提交信息操作。
問題描述：
uniapp中，在調用上傳圖片的函數時，代碼不會等到調用的上傳圖片函數執行完成拿到圖片的存儲地址，而是直接繼續執行，會造成數據為空取不到。
解決辦法：
測試結果，網上教程描述說可以將異步執行的函數轉成同步，實際測試無通過，程序依舊異步執行，未取到結果，有效性待定
return new Promise((resolve, reject) => {
this.$refs.imgUpload.upload(res=>{
if(res.code==0){
//0為正常返回，將回調的線上圖片數組 賦值給需要提交的表單里
//res.urlArray 線上路徑圖片數組
//TODO
console.log(res.urlArray[0]);
console.log(typeof(res));
that.imgUrl = res.urlArray;
resolve(res);
}else{
//用戶沒有上傳圖片的返回 code碼為400
reject("error");
}
});
})
- 函數回調
將執行上傳的函數寫到一個函數中，在上傳圖片的函數執行完成后，在其中接着寫其他的數據提交操作，實際測試可行，不過代碼簡潔性性不高，耦合過高。
btn_submit(){
uni.showModal({
content: "姓名："+this.name+",性別："+this.sex,
showCancel: false
});
// this.submit();
this.$refs.imgUpload.upload(res=>{
if(res.code==0){
//0為正常返回，將回調的線上圖片數組 賦值給需要提交的表單里
//res.urlArray 線上路徑圖片數組
//TODO
console.log(res.urlArray[0]);
console.log(res.urlArray);
let imgurl = res.urlArray.toString();
console.log(imgurl);
let a = imgurl.split(",");
console.log(a[0]);
//其他操作
// uni.request({
// url:this.$baseUrl.baseUrl+"Wxtest/getForm",
// methods:"POST",
// data:{
// name:this.name,
// sex:this.sex,
// birth:this.birth,
// dircript:this.discript
// },
// success:(res)=>{
// console.log("success:"+res.data.name);
// },
// fail:(res)=>{
// console.log("錯誤")
// }
// })
}else{
//用戶沒有上傳圖片的返回 code碼為400
}
});
}