前记：本篇文章不是基础知识科普篇，而是实际工作中的记录篇，以实际工作需求带出前端请求处理的演变历程。
开篇先来一个回调callback的例子（来自微信小程序 Api）:
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
赤裸裸的success回调，设想一下如果我request里面嵌request甚至再嵌好几个~~~那画面就叫回调炼狱。
改造成promise形态，学习最简单的promise方法封装
再不改造更待何时，第一个浮现在脑海的东西自然是promise，我们先来改造request，当然我改造了不少小程序原有的api。我给这些原有api都采用了promise化的赋能。在wx方法里面独立出来了wx.top库。于是我的request变成了wx.top.request，使用参数不变。
wx.top = {};
wx.top.request = function(){
return new Promise((resolve, reject){
wx.request({
url: args.url, //仅为示例，并非真实的接口地址
data: args.data,
//header:这里你按需定制比如全局token
success (res) {
//这里也可以根据后端通讯规范，设置自己的relove和reject
relove(res);
},
fail (res){
reject(res);
}
});
});
}
此时的request数据返回怎么处理
wx.top.request({
url : "xxx",
data : {}
}).then(res=>{
console.log(res); //请求的返回信息
})；
以上是promise最直接的用法，封装方式就是return new Promise对象即可。Promise化的方法，你只需要关注两点，什么时候resolve什么时候reject。
在我们项目上线后的一个月，突然有一天我接到一个工单，说是直接下单不能买了，跟后端反复查实，最后找到了问题，原来是下单数据依赖的接口请求有好几处（拉取地址信息，计算运费，计算个人账户余额），很容易出现还没算好运费就被用户点了购买的情况，我试图去用三个标记去判断可以提交，拦截是可以，代码可读性不好，然后又没办法做友好度提示。于是我又做了如下改进：
利用promise封装原子方法，利用promise实现接口以来，利用promise实现统一状态管理
一、计算运费方法：
calcPostFee(){ //获取运费
return new Promise((resolve, reject) => {
if(isPost || !address){ //如果包邮或者没有地址信息返回0
resolve(0);
}else{
orderFreight(address, order).then(res => { //order
//这里resolve(运费)或者reject(错误信息)
}).catch((err) => {
console.log(err); //接收错误信息-信息包含请求错误|代码错误
wx.top.showTip(getObjVal(err, ['data', 'msg'],true) || '获取运费失败'); //getObjVal是我自己封装的js对象数据方法
reject(err);
});
}
});
},
二、获取地址信息：
queryAddress(){ //获取运费
return new Promise((resolve, reject) => {
queryUserAllAddress({ header : {token : this.userInfo.token} }).then(res=>{
//这里resolve(地址信息)或者reject(错误信息);
}).catch((err)=>{
console.log(err);
wx.top.showTip(getObjVal(err, ['data', 'msg'],true) || '获取地址失败');
reject(err);
});
});
},
三、计算个人余额及订单费用方法：
calcOrder(order){ //计算余额及订单费用
return new Promise((resolve, reject) => {
//单纯的计算没有任何请求，这里我也想提醒大家一下promise是个工具，不是只有请求才可以用，万物皆可promise
//这里resolve(正确信息)或者reject(错误信息);
});
},
四、接口总统领：
prepareData(){
return new Promise((resolve, reject)=>{
wx.showLoading({title : "订单正在生成...", mask : true}); //开启mask，不可点击。可以统一提示了，代码再也不散乱了
this.queryAddress().then(()=>{ //地址信息回来之后
return this.calcPostFee(); //再计算运费
}).then(()=>{
return this.calcOrder(); //算好订单数据之后
}).then(()=>{
reeolve();
wx.hideLoading();//解开遮罩，避免误点
}).catch((err)=>{
wx.hideLoading(); //隐藏loading
});
});
}
prepareData.then(res=>{
this.setData({ disableBtn : false; }); //可以去购买了
}).catch(()=>{
this.setData({ disableBtn : true; });//设置购买按钮不可点击
})
下面我开始推出async await
这是https://javascript.info/async-await中的一句话，概括的很到位，
说async await是让promise以更舒适更时髦的方式工作的语法，而且其极度容易理解和使用
image.png
先上个例子来让大家走进基本语法：
async prepareData(){
wx.showLoading({title : "订单正在生成...", mask : true});
try{
let address = await this.queryAddress();
let fee = await this.calcPostFee();
let amt = await this.calcOrder();
wx.hideLoading();
return true;
}catch(e){//任意一个方法错误（reject或者js错误）都可以被捕获
wx.hideLoading();
}
}
prepareData().then(...)
嗯，不错确实优雅了很多，也洋气了，await用的很传神。就是捕获错误的方式有点不优雅，好的，上另外一种方式：
async prepareData(){
let address = await this.queryAddress();
let fee = await this.calcPostFee();
let amt = await this.calcOrder();
}
//使用
wx.showLoading({title : "订单正在生成...", mask : true});
prepareData().then(...).catch(...);
咿？这里的prepareData也可以then跟catch？
没错儿，async 修饰词就是让方法体变成了Promise对象，等同于在方法体内部return new Promise。
而await只能在async修饰的方法体内部使用，作用也很明确，我去买橘子，你等着。
很多人说async await方法是回调的终极解决方案，我不认同，我认为其只是一种方法载体，让Promise的写法更优雅。 请看如下实验，fa方法执行时间很明显比fb执行时间要长，但是await告诉fb你先等着，请看下例：
验证一下await的执行顺序
function fa(){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('a')
},2000);
});
}
function fb(a){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log(a);
resolve('b'+a)
},1000);
});
}
async function c(){
let a = await fa();
let b = await fb(a);
}
c().then(res=>{
console.log(res);
});
反思Promise有all跟race方法，怎么用async跟await去实现这样的机制呢？也许有方式，但是我想说的还是它只是Promise的载体，跟最终的解决方案范畴有点出入。不管js以什么样的方式什么样的速度发展，我希望能够出来一些解决真正业务痛点的语法，谢谢各位观看者。
网友评论