promise操作爬坑

谁借莪１个温暖的怀抱￠ 2021-09-20 08:34 379阅读 0赞

# 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` 的常规用法，而且仍会造成**回调嵌套**等问题，非常不推荐这种做法。
 *  **特此勘误。以免影响想初学者。**

--------------------

（完）