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 在任意代码中使用。
相关推荐
KenXu11 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮11 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界11 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说11 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
a5876911 小时前
Java核心概念精讲:TCP与UDP的区别、Java NIO的几个核心组件与HTTP和HTTPS的区别等(46-50)
java·面试·nio
小鱼儿亮亮11 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
定栓11 小时前
Typescript入门-类型断言讲解
前端·javascript·typescript
码间舞11 小时前
你不知道的pnpm!如果我的电脑上安装了nvm,切换node版本后,那么pnpm还会共享一个磁盘的npm包吗?
前端·代码规范·前端工程化
用户15129054522011 小时前
itoa函数
前端
xiaominlaopodaren11 小时前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js