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 在任意代码中使用。
相关推荐
Justinc.2 分钟前
CSS3新增边框属性(五)
前端·css·css3
CXDNW16 分钟前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
neter.asia18 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫19 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年38 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_39 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891141 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾43 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu1 小时前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化