Javascript Promise 中的 reject VS throw

前文

本文介绍了在 Javascript 中使用 reject 和 throw 的情况,并解释了它们之间的区别。

reject

它是 Javascript promise 中的一个内置函数,用于 promise 对象返回因特定原因而被拒绝的内容。

语法:

js 复制代码
Promise.reject(reason)

reason 可以是简单的字符串信息,也可以是错误对象。

example code 1:传递字符串信息作为 reason。
js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => { 

    reject( 'promise failed!' );

});
p.catch(err => { 

	console.log( err );

});
</script>
输出
复制代码
promise failed!
example code 2: 传递一个 Error 实例作为 reason。
js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => { 

reject( new Error( 'promise failed!' ) );

});
p.catch( err => { 

	console.log( err );

});
</script>
输出: 正如你所看到的,当我们传递一个错误对象时,我们会得到整个错误树。
复制代码
 Error: promise failed!
    at :4:9
    at new Promise ()
    at :2:11
    at render (tryit.php:202)
    at tryit.php:170
    at dispatch (jquery.js:4435)
    at r.handle (jquery.js:4121)

throw

在 JavaScript 中用于创建和抛出用户定义的异常。使用 JavaScript throw 语句,您可以完全控制程序流程,并生成用户定义的错误信息。如果我们在上述两个示例中使用 throw 语句代替 reject(),结果将完全相同(你可以自己尝试一下,将 reject 替换为 throw)。 示例: 不过,throw 可以在任何 Javascript 的 try-catch 块中使用,而不仅限于 promise。

example code 1: 在 promise 使用 throw
js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => { 

    throw( 'promise failed!' );

});
p.catch(err => { 

	console.log( err );

});
</script>
输出
复制代码
promise failed!
example code 2: 直接使用 throw
js 复制代码
<script>
var a = 20;
try
{
    if( a < 25 )

    throw ( 'Less than 25' ); 

    console.log( 'Okay!' );
}
catch(err)
{
    console.log( err );
}
</script>
输出:
复制代码
Less than 25

既然我们已经了解了 rejectthrow 的基本工作原理,下面我们就来谈谈它们之间的区别:

比较 reject / throw:

差异 1: 如果 Promise 内有异步回调函数,我们就不能在回调函数内使用 throw,因为 catch() 不会识别它,我们将在输出中得到一个错误。

example code1:

js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => {
	
	// Asynchronous function called within the Promise.
	setTimeout( () => { 
            throw( 'promise failed!' );
	
	}, 1000);
});

// The catch block will not be able to recognize the 
// error thrown. It will become an uncaught exception.
p.catch( ( err )=> {

	console.log( err ); 
});
</script>

输出: 正如你所看到的,错误信息("promise failed!")已经打印在输出中,但我们的 promise 的 catch() 函数并没有打印出来。它变成了一个未捕获的异常。

example code2 :解决上述问题,我们可以使用 reject() 方法。

js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => {

	// Asynchronous function called within the Promise.
	setTimeout( () => { 

            reject( 'promise failed!' );
	
	}, 1000);
});

// The catch block will be able to recognize
// the rejected statement.
p.catch( (err) => {

	console.log( err ); 
});
</script>

输出: 在这里,catch 块能够识别 reject() 并打印相应的信息。

差异 2: 这是一个非常基本的区别。throw 抛出异常后,函数执行将推出, 而 reject 不会。

example code 1:

js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => {

	throw( 'promise failed!' );	 

	console.log("Here");
});

p.catch( err => {
	console.log( err )
});
</script>

输出: 从这个示例可以看出,语句 console.log("Here") 没有被执行。

example code 2: 为了解决上述问题,我们使用 reject 代替 throw 语句,函数内部的 reject 之后的语句将在 catch 块之前被执行。

js 复制代码
<script>
const p = new Promise( ( resolve, reject ) => {

	reject( 'promise failed!' );	 

	console.log( "Here" );
});

p.catch( err => {

	console.log( err )
});
</script>

输出:

差异3: 也是之前提到的,reject 需要与 promise 一起使用, 而 throw 可以结果 try/catch 在任意代码中使用。
相关推荐
中微子1 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪2 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
_一条咸鱼_2 分钟前
Vulkan入门教程:源码级解析
android·面试·android jetpack
南屿im7 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon8 分钟前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子9 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy10 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心10 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
hxmmm15 分钟前
webpack多入口打包文件
前端
CAD老兵16 分钟前
前端组件库的多主题实现原理与实战指南
前端