免费空间访客领取网站,直播网站建设需要什么软件,中学生设计制作图片,流放之路做装备词缀网站async/await 的理解
async/await 其实是 Generator 的语法糖#xff0c;它能实现的效果都能用then 链来实现#xff0c;它是为优化 then 链而开发出来的。从字面上来看#xff0c;async 是“异步”的简写#xff0c;await 则为等待#xff0c;所以很好理解async用于申明一…async/await 的理解
async/await 其实是 Generator 的语法糖它能实现的效果都能用then 链来实现它是为优化 then 链而开发出来的。从字面上来看async 是“异步”的简写await 则为等待所以很好理解async用于申明一个 function 是异步的而 await 用于等待一个异步方法执行完成。当然语法上强制规定 await 只能出现在asnyc 函数中先来看看 async 函数返回了什么
async function testAsy() {return hello world;;
}
let result testAsy();
console.log(result);
Promise {fulfilled: hello world;}
[[Prototype]]: Promise
[[PromiseState]]: fulfilled
[[PromiseResult]]: hello world;所以async 函数返回的是一个 Promise 对象。async 函数包含函数语句、函数表达式、Lambda 表达式会返回一个Promise对象如果在函数中 return 一个直接量async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象。async 函数返回的是一个 Promise 对象所以在最外层不能用await 获取其返回值的情况下当然应该用原来的方式then()链来处理这个 Promise 对象就像这样
async function testAsy() {return hello world;;
}
let result testAsy();
console.log(result);
result.then(res {console.log(res); // hello world;
})那如果 async 函数没有返回值又该如何很容易想到他会返回
Promise.resolve(undefined);联想一下 Promise 的特点——无等待所以在没有await 的情况下执行 async 函数它会立即执行返回一个Promise 对象并且绝不会阻塞后面的语句。这和普通返回Promise 对象的函数并无二致。 注意Promise.resolve(x) 可以看作是new Promise(resolveresolve(x)) 的简写可以用于快速封装字面量对象或其他对象将其封装成 Promise 实例。async/await 的优势
单一的 Promise 链并不能发现 async/await 的优势但是如果需要处理由多个 Promise 组成的 then 链的时候优势就能体现出来了很有意思Promise 通过 then 链来解决多层回调的问题现在又用 async/await 来进一步优化它。 假设一个业务分多个步骤完成每个步骤都是异步的而且依赖于上一个步骤的结果。仍然用 setTimeout 来模拟异步操作
function takeLongTime(n) {return new Promise(resolve {setTimeout(() resolve(n 200), n)})
};function step1(n) {console.log(step1 with ${n});return takeLongTime(n);
}
function step2(n) {console.log(step2 with ${n});return takeLongTime(n);
}
function step3(n) {console.log(step3 with ${n});return takeLongTime(n);
}现在用 Promise 方式来实现这三个步骤的处理
function doIt(n) {console.time(doIt);const time1 300;step1(time1).then(time2 step2(time2)).then(time3 step3(time3)).then(result {console.log(result is ${result});console.timeEnd(doIt);});
}doIt();
step1 with 300
step2 with 500
step3 with 700
result is 900
doIt: 1.652s
输出结果 result 是 step3() 的参数 700 200 900。doIt()顺序执行了三个步骤一共用了 300 500 700 1500 毫秒和console.time()/console.timeEnd() 计算的结果一致。如果用 async/await 来实现呢会是这样
async function doIt() {console.time(doIt);const time1 300;const time2 await step1(time1);const time3 await step2(time2);const result await step3(time3);console.log(result is ${result});console.timeEnd(doIt);
}
doIt();
step1 with 300
step2 with 500
step3 with 700
result is 900
doIt: 1.515s结果和之前的 Promise 实现是一样的但是这个代码看起来是不是清晰得多几乎跟同步代码一样
async/await 对比 Promise 的优势
代码读起来更加同步Promise 虽然摆脱了回调地狱但是then的链式调⽤也会带来额外的阅读负担
Promise 传递中间值⾮常麻烦⽽async/await⼏乎是同步的写法⾮常优雅
错误处理友好async/await 可以⽤成熟的try/catchPromise的错误捕获⾮常冗余
调试友好Promise 的调试很差由于没有代码块你不能在⼀个返回表达式的箭头函数中设置断点如果你在⼀个.then 代码块中使⽤调试器的步进(step-over)功能调试器并不会进⼊后续的.then代码块因为调试器只能跟踪同步代码的每⼀步。
