Promise.resolve / reject的同步和异步

记得之前查资料说Promise.resolve()和Promise.reject()都是同步立即返回新的Promise对象,深以为然。但是今天用try-catch测试的时候发现表现不似预期。

js 复制代码
try{
    Promise.reject("no");
}catch(e){
	console.log("catched:",e) 
}
// 捕捉不到
js 复制代码
(async function(){
    try{
		await Promise.reject("no");
	}catch(e){
		 console.log("catched:",e) 
	}
})()
// catched: no
// 可以捕捉

诶?咋回事,说好的同步呢?

再捕捉新Promise试一下,发现新Promise确实是同步立即返回的呀

js 复制代码
console.log(
	"catched",
	(() =>{
	    setTimeout(() =>("hi"))
	})()
)
// catched undefined
// 异步内容无法捕捉到
js 复制代码
console.log(
	"catched",
	Promise.resolve("hi")
)
// catched Promise {<fulfilled>: 'hi'}
// 但是Promise.resolve()返回的新Promise可以捕捉到,说明也确实不是异步的

咋回事呢?

问GPT,恍然大悟


GPT4o mini:

关键在于理解"立即返回"和"异步处理"的区别:

  1. 立即返回的 Promise 对象

    • 当你调用 Promise.resolve(value)Promise.reject(reason) 时,函数会立即返回一个 Promise 对象。这个 Promise 对象的状态是"已解决"或"已拒绝",取决于你调用的是 resolve 还是 reject
  2. 异步处理

    • 尽管 Promise.resolvePromise.reject 是同步的(即它们会立即返回一个 Promise 对象),但是 Promise 对象的处理(如执行 .then.catchawait)是异步的。
    • 这意味着,即使你同步地创建了一个已拒绝的 Promise,实际上,处理这个拒绝(如调用 .catch 或在 async 函数中用 await)会被放在微任务队列中,稍后执行。

例如:

javascript 复制代码
console.log('Start');

Promise.reject('Error occurred')
  .catch(error => {
    console.log('Caught error:', error);
  });

console.log('End');

输出将是:

vbnet 复制代码
Start
End
Caught error: Error occurred

在这个例子中:

  • Promise.reject 是同步的,立即返回一个拒绝的 Promise 对象。
  • 但是,.catch 的回调函数不会立即执行,它会在当前任务(即 console.log('End'))完成后,进入微任务队列并执行。这就是为什么"Caught error"在"End"之后才出现的原因。

这表明,即使 Promise 对象是立即创建的,其内部的处理(比如 catchthen)还是在事件循环的微任务阶段进行的,所以可以理解为 Promise 的处理是异步的。


总结一下:

  1. Promise.resolve() / reject()同步立即返回settled状态的对象。
  2. 但是由于回调本质上都是.then处理(.catch也是.then的一部分),而.then是异步的,所以对应的回调还是异步的。
相关推荐
harrain1 小时前
什么!vue3.4开始,v-model不能用在prop上
前端·javascript·vue.js
阿蒙Amon6 小时前
TypeScript学习-第7章:泛型(Generic)
javascript·学习·typescript
睡美人的小仙女1276 小时前
Threejs加载环境贴图报错Bad File Format: bad initial token
开发语言·javascript·redis
fanruitian6 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
摘星编程7 小时前
React Native + OpenHarmony:Timeline垂直时间轴
javascript·react native·react.js
2501_944525548 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 支出分析页面
android·开发语言·前端·javascript·flutter
jin1233229 小时前
React Native鸿蒙跨平台完成剧本杀组队详情页面,可以复用桌游、团建、赛事等各类组队详情页开发
javascript·react native·react.js·ecmascript·harmonyos
经年未远10 小时前
vue3中实现耳机和扬声器切换方案
javascript·学习·vue
刘一说10 小时前
Vue 组件不必要的重新渲染问题解析:为什么子组件总在“无故”刷新?
前端·javascript·vue.js
可触的未来,发芽的智生10 小时前
狂想:为AGI代称造字ta,《第三类智慧存在,神的赐名》
javascript·人工智能·python·神经网络·程序人生