1.前言
JS早期,异步函数通过嵌套多层回调函数来处理同步的业务逻辑,比如ajax,你总是在success的方法里去写执行成功之后的逻辑代码,同时为了保证同步性,你又不得不在success的方法里继续去写之后的逻辑。ES6对异步函数的处理提供了优雅的链式语法糖Promise,而ES7中对Promise采用更进一步的优化,提出async和await关键字,让异步代码能够使用同步代码的语法来达到最终的异步效果。
2.Promise链式艺术
对于异步函数,创建Promise对象后,如果异步函数执行成功,则会调用resolve方法将结果传递下去,反之如果异常,则会使用reject传递结果。
function ajaxPull(status) {
return new Promise((resolve, reject) => {
setTimeout(function () {
if (status === -1) {
reject(status);
} else {
resolve(status);
}
}, 1);
});
}
ajaxPull(2).then(function (res) {
console.log('success');
}).catch(function (res) {
console.log('error');
});
3.async/await同步代码风格的救星
当你需要同步的处理异步函数时,比如:前端获取access_token之后,需要拿着access_token去拿用户的信息,这时候promise的做法是多个链式的then()方法,async/await的出现,优雅的解决了使用同步代码风格去同步执行异步函数的问题。
function ajaxToken(params) {
return new Promise((resolve, reject) => {
setTimeout(function () {
if (params === -1) {
reject(params);
} else {
resolve(params);
}
}, 1000);
});
}
function ajaxUserInfo(params) {
return new Promise((resolve, reject) => {
setTimeout(function () {
if (params === -1) {
reject(params);
} else {
resolve(params);
}
}, 500);
});
}
async function getUserInfo() {
ajaxToken(1).then(function(params){
console.log(params);
ajaxToken(2).then(function(params){
console.log(params);
});
});
console.log(await ajaxToken(1));
console.log(await ajaxUserInfo(2));
}
getUserInfo();
上面展示了promise和async/await处理连续同步的业务逻辑的例子,await关键字必须在async函数里面声明,另外await并不会阻塞js代码的运行。
4.参考
如无特殊说明,文章均为本站原创,转载请注明出处。如发现有什么不对的地方,希望得到您的指点。网络博文
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544