ES7之Async/await的使用详解
在js异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。ES6提供的Promise方法和ES7提供的Async/Await语法糖可以更好解决多层回调问题。
Promise对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
await操作符用于等待一个Promise对象。它只能在异步函数asyncfunction中使用。
await表达式会暂停当前asyncfunction的执行，等待Promise处理完成。若Promise正常处理(fulfilled)，其回调的resolve函数参数作为await表达式的值，继续执行asyncfunction。
一个ajax请求时
通常使用ajax请求数据时，会
$.ajax({
url:'data1.json',
type:'GET',
success:function(res){
console.log(res)//请求成功，则得到结果res
},
error:function(err){
console.log(err)
}
})
上面可以得到我们想要的结果res--->{"url":"data2.json"}
多个ajax请求时
但是当得到的数据res需要用于另一个ajax请求时，则需要如下写法：
$.ajax({
url:'data1.json',
type:'GET',
success:function(res){
$.ajax({
url:res.url,//将第一个ajax请求成功得到的res用于第二个ajax请求
type:'GET',
success:function(res){
$.ajax({
url:res.url,//将第二个ajax请求成功得到的res用于第三个ajax请求
type:'GET',
success:function(res){
console.log(res)//{url:"thisisdata3.json"}
},
error:function(err){
console.log(err)
}
})
},
error:function(err){
console.log(err)
}
})
},
error:function(err){
console.log(err)
}
})
上面出现多个回调函数的嵌套，可读性较差（虽然这种嵌套在平常的开发中少见，但是在node服务端开发时，还是很常见的）
优化方法
使用promise链式操作
如下，使用Promise，进行链式操作，可以使上面的异步代码看起来如同步般易读，从回调地狱中解脱出来。。
functionajaxGet(url){
returnnewPromise(function(resolve,reject){
$.ajax({
url:url,
type:'GET',
success:function(res){
resolve(res);
},
error:function(err){
reject('请求失败');
}
})
})
};
ajaxGet('data1.json').then((d)=>{
console.log(d);//{url:"data2.json"}
returnajaxGet(d.url);
}).then((d)=>{
console.log(d);//{url:"data3.json"}
returnajaxGet(d.url);
}).then((d)=>{
console.log(d);//{url:"thisisdata3.json"}
})
Async/await方法
- async表示这是一个async函数，即异步函数，await只能用在这个函数里面。
- await表示在这里等待promise返回结果了，再继续执行。
- await后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
- await操作符用于等待一个Promise对象。它只能在异步函数asyncfunction中使用。
- await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。
执行一个ajax请求，可以通过如下方法：
functionajaxGet(url){
returnnewPromise(function(resolve,reject){
$.ajax({
url:url,
type:'GET',
success:function(res){
resolve(res)
},
error:function(err){
reject('请求失败')
}
})
})
};
asyncfunctiongetDate(){
console.log('开始')
letresult1=awaitajaxGet('data1.json');
console.log('result1--->',result1);//result1--->{url:"data2.json"}
};
getDate(); //需要执行异步函数
执行多个ajax请求时：
functionajaxGet(url){
returnnewPromise(function(resolve,reject){
$.ajax({
url:url,
type:'GET',
success:function(res){
resolve(res)
},
error:function(err){
reject('请求失败')
}
})
})
};
asyncfunctiongetDate(){
console.log('开始')
letresult1=awaitajaxGet('data1.json');
letresult2=awaitajaxGet(result1.url);
letresult3=awaitajaxGet(result2.url);
console.log('result1--->',result1);//result1--->{url:"data2.json"}
console.log('result2--->',result2);//result2--->{url:"data3.json"}
console.log('result3--->',result3);//result3--->{url:"thisisdata3.json"}
};
getDate();//需要执行异步函数
asyncawait捕捉错误:
asyncawait中.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的trycatch语法捕捉错误。
例如，如果下面的url写错了
functionajaxGet(url){
returnnewPromise(function(resolve,reject){
$.ajax({
url:url111,//此处为错误的url
type:'GET',
success:function(res){
resolve(res)
},
error:function(err){
reject('请求失败')
}
})
})
};
asyncfunctiongetDate(){
console.log('开始')
try{
letresult1=awaitajaxGet('data1.json');//执行到这里报错，直接跳至下面catch()语句
letresult2=awaitajaxGet(result1.url);
letresult3=awaitajaxGet(result2.url);
console.log('result1--->',result1);
console.log('result2--->',result2);
console.log('result3--->',result3);
}catch(err){
console.log(err)//ReferenceError:url111isnotdefined
}
};
getDate();//需要执行异步函数
源码
源码查看
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。