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 在任意代码中使用。
相关推荐
阿珊和她的猫3 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
PAK向日葵5 小时前
【算法导论】PDD 0817笔试题题解
算法·面试
加班是不可能的,除非双倍日工资7 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi7 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip8 小时前
vite和webpack打包结构控制
前端·javascript
excel8 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
阿华的代码王国9 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端
一条上岸小咸鱼9 小时前
Kotlin 基本数据类型(三):Booleans、Characters
android·前端·kotlin
Jimmy9 小时前
AI 代理是什么,其有助于我们实现更智能编程
前端·后端·ai编程
ZXT9 小时前
promise & async await总结
前端