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 在任意代码中使用。
相关推荐
燃先生._.17 分钟前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖1 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235241 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240252 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar2 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人3 小时前
前端知识补充—CSS
前端·css
GISer_Jing3 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245523 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v3 小时前
webpack最基础的配置
前端·webpack·node.js