ES8 Async 和 Await
Async 和 Awaiit 是 Promise 的扩展,我们知道 JavaScript 是单线程的,使用 Promise 之后可以使异步操作的书写更简洁,而 Async 使 Promise 像同步操作
一、Async
Async 自动将常规函数转换成 Promise,返回值一个 Promise 对象,使用 async 的效果:
async function f() {
return 123
}
console.log(f()) // Promise 对象async function f() {
return 123
}
f().then(console.log) // 123可以看出,f() 的返回值有 then 方法(在 JavaScript 中只有原生 Promise 对象拥有 then 方法)
console.log(f() instanceof Promise) // true通过验证,我们知道想获得一个 Promise 对象,可以不用再使用 new Promise 了,可以用 async 来实现
另外,async 函数显示返回的结果如果不是 Promise,会自动包装成 Promise 对象,也就是说上面的代码等同于:
async function f() {
return Promise.resolve(123)
}
二、Await
Await 放置在 Promise 调用之前,强制后面的代码等待,直到 Promise 对象 resolve,得到 resolve 的值作为 await 表达式的运算结果
未使用 await 的效果:
async function f() {
let promise = new Promise((resolve) => {
setTimeout(() => resolve(123), 1000)
})
console.log(promise.then(val => console.log(val)))
console.log(456)
}
f()输出:
456
123使用 await 的效果:
async function f() {
let promise = new Promise((resolve) => {
setTimeout(() => resolve(123), 1000)
})
console.log(await promise)
console.log(456)
}
f()输出:
123
456await 的字面意思为“等待”,它等什么呢?等的是 Promise 的返回结果,上面这段代码由 async 开启一个 Promise 对象,函数内部嵌套了一个 Promise 操作,这个操作需要等待 1 秒才返回“123”的结果,也就是说 await 在拿到这个结果之前不会执行后面的代码,会一直等到拿到这个结果才往后继续执行
注意:
- await 后面如果不是 Promise 对象会自动包装成 Promise 对象
- await 只能在 async 函数内部使用,否则会报错
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!