await 到底在等什么?

核心

其实 await 本质上等的是:后面的 thenable 对象的 then 方法调用 resolve 或者 reject

这里面其实包含三个细节:

  1. thenable 对象其实就是包含 then 方法的普通对象。
  2. 如果 await 后面的对象不是一个 thenable 对象,那么系统会将它包装成 thenable 对象。
  3. Promise 对象具有 then 方法,所以 Promise 对象其实也是一个 thenable 对象。

如果理解了这三个细节,那么下面这些测试应该就很好理解了。

测试

测试一:普通 thenable 对象

js 复制代码
const test = async () => {
    try {
        const data = await { then(resolve, reject) { resolve('hello') } }
        console.log(data, 'data')
    } catch (error) {
        console.log(error, 'error')
    }
}
test()
// hello data
js 复制代码
const test = async () => {
    try {
        const data = await { then(resolve, reject) { reject('hello') } }
        console.log(data, 'data')
    } catch (error) {
        console.log(error, 'error')
    }
}
test()
// hello error
js 复制代码
const test = async () => {
    await { then: r => setTimeout(r, 1000) }
    console.log('done')
}

test()
// 1s 之后输出 done

测试二:非 thenable 对象

js 复制代码
const test = async () => {
    const data = await 'hello'
    console.log(data, 'data')
}

test()
// hello data
js 复制代码
const test = async () => {
    const data = await { a: 1 }
    console.log(data, 'data')
}

test()
// { a: 1 } data

测试三:Promise 对象

js 复制代码
const test = async () => {
    try {
        const data = await Promise.resolve('hello')
        console.log(data, 'data')
    } catch (error) {
        console.log(error, 'error')
    }
}
test()
// hello data
js 复制代码
const test = async () => {
    try {
        const data = await Promise.reject('hello')
        console.log(data, 'data')
    } catch (error) {
        console.log(error, 'error')
    }
}
test()
// hello error

总结

总的来说,await 这个操作符,实际上会调用对象的 then 方法,并传入 resolve 和 reject 参数,等我们 then 方法中调用了 resolve 或者 reject 时 await 的结果就等到了。而对于没有 then 方法的对象或者变量,系统会自动生成一个具有 then 方法的对象(也就是Promise对象),然后将该对象或者变量作为 resolve 的参数进行调用返回。

其实我们平时一般会把 await 理解成等到后面 Promise 的返回结果 ,这样理解其实没有什么问题,而且覆盖我们平时编程的绝大多数场景。但是更精细一点的理解其实应该要理解到 await 本质上是在操作对象的 then 方法(调用对象的 then 方法,并传入 resolve、reject,并等待 then 方法去调用他们)。

相关推荐
杨进军10 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW25 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字31 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端