uniapp异步执行问题记录

uniapp异步执行问题记录

代码执行过程中，调用其他函数，执行步骤异步执行

场景描述：

点击按钮向后台提交信息，所提交的信息中包含了图片信息，需要先将图片信息进行上传到后端，后端保存图片信息后返回图片存储的地址信息给前端，最后再执行提交信息操作。

问题描述：

uniapp中，在调用上传图片的函数时，代码不会等到调用的上传图片函数执行完成拿到图片的存储地址，而是直接继续执行，会造成数据为空取不到。

解决办法：

• 使用Promise 封装

测试结果，网上教程描述说可以将异步执行的函数转成同步，实际测试无通过，程序依旧异步执行，未取到结果，有效性待定

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