promise操作爬坑

promise 操作爬坑

建立promise对象

	/* *******************************扫码操作********************************* */
			scanQRCode:function(){
				let promise = new Promise(function(resolve,reject){
					uni.scanCode({
						success(res) {
							var scanResult = res.result;
								resolve(scanResult);
						}
					})
				})
				return promise;
			},
	/* ******************************请求已申请的焊材列表************************ */	
			getUseHC:function(scanResult,userid){
				let promise = new Promise(function(resolve,reject){
					uni.request({
						url:'https://****/HCUserSweepCode',
						method:"POST",
						//header:{'Authorization':'BasicAuth ' + this.account.Ticket},
						data:{
							LUserQrCode:scanResult,
							PUserID:userid
						},
						success:(res)=>{
							var data = res.data;
							data = JSON.parse(data)
							if(data.Msg == 'ok'){
								console.log(data.Data);
								var hcNameLists = data.Data.map(function(list){
									return list.HCName;
								})
								console.log(hcNameLists);
								resolve(hcNameLists);
							}
							else{
								this.show_ModelMsg('错误提示',data.Msg,false);
							}
						}
					});
				});
				return promise;
			},
	/* ***************************显示已申请的焊材列表************************** */
			showHCLists:function(hcNameLists){
				console.log('want:'+hcNameLists);
				let promise = new Promise(function(resolve,reject){
					uni.showActionSheet({
						itemList:hcNameLists,
						success:(res)=> {
							resolve(hcNameLists[res.tapIndex])
						},
						fail: function (res) {
							console.log(res.errMsg);
						}
					});
				});
			return promise;
			},
	/* ***************************扫描焊材二维码，完成领用********************* */
			scanHCQRCode:function(HCMsg){
				console.log(HCMsg);
				let promise = new Promise((resolve,reject)=>{
					uni.scanCode({
						success:(res)=> {
							var scanResult = res.result;
							if(HCMsg == scanResult){
								resolve(scanResult);
							}
							else{
								this.show_ModelMsg('错误提示','焊材信息不匹配',false);
							}	
						}
					})
				})
				return promise;
			},

方法一： 错误的链式调用

			scanUser:function(){
				var scan = this.scanQRCode();
				scan.then((scanResult)=>{
					this.getUseHC(scanResult,this.account.OID)
				}).then((v)=>{
						this.showHCLists(v)
				}).then((v)=>{
							this.scanHCQRCode(v)
				})
			},

方法二： 正确的链式调用

scanUser:function(){
				var scan = this.scanQRCode();
				scan.then((scanResult)=>{
					this.getUseHC(scanResult,this.account.OID).then((v)=>{
						this.showHCLists(v).then((v)=>{
							this.scanHCQRCode(v);
						});
				});
				});
			},

一脸懵逼

为啥官方介绍都是用方法一实现链式调用呢，而我在vue项目里使用方法一总是第二步请求还未获取到数据，第三步就已经执行了，真的是一脸懵逼啊！！！！

---

问题回溯

最近又回过头来学习ES6的相关知识，猛然间意思到去年初学promise的时候写过一篇关于promise学习疑惑的地方，今天回过头来看。原来是当初基础知识和概览没有掌握牢固。特此完善。

                                                        ————2020年10月3日   笔者记录

错误的链式调用并非错误

• Promise 链式调用，需要前一层返回一个promise 实例，反观我之前写的记录,前两层.then()均为显示的设置return ，自然不满足返回promise实例的要求。只需对其做如下调整即可

   		scanUser:function(){
   			var scan = this.scanQRCode();
   			scan.then((scanResult)=>{
   			    return this.getUseHC(scanResult,this.account.OID)
   			}).then((v)=>{
   				return this.showHCLists(v)
   			}).then((v)=>{
   				this.scanHCQRCode(v)
   			})
   		},

正确的链式调用并非真正的链式调用

• 上文提及的方法二：正确的链式调用，并非链式调用法，只是promise 的常规用法，而且仍会造成回调嵌套等问题，非常不推荐这种做法。
• 特此勘误。以免影响想初学者。

---

（完）