【前端异常】JavaScript错误处理：分析 Uncaught(in promise) error ...

在开发过程中，JavaScript的错误处理是一个老生常谈的话题。当应用程序发生未捕获的异常时，Uncaught(in promise) error是其中最常见的错误类型。这篇文章将从多个方面详细阐述这种错误类型的缘故原由与解决方案。
一、Promise是什么

Promise是一种用于异步编程的原生JavaScript对象。它提供了一种处理异步操作效果的方式，Promise表现一个异步任务的耽误状态。

1. new Promise((resolve, reject) => {
2.   // 异步操作
3.   if (success) {
4.     resolve(result);
5.   } else {
6.     reject(error);
7.   }
8. }).then((result) => {
9.   // 处理异步操作结果（成功后的）
10. }).catch((error) => {
11.   // 处理异步操作错误（有异常的）
12. });

复制代码

Promise构造函数吸取一个执行函数作为参数，并在异步操作完成后调用resolve或reject方法。
然后，我们可以使用then和catch方法处理相应的效果或错误。如果Promise的状态变为resolved，then方法被调用。否则，如果状态变为rejected，catch方法被调用。
下面是我项目中 index.js 中使用的方式：

1. export function addAlarmRule(data) {
2.         return request({
3.                 url: '/device/rule',
4.                 method: 'post',
5.                 data: data
6.         });
7. }

复制代码

index.vue 代码中使用的方式如下：

1. /** 提交按钮 */
2. submitForm: function() {
3.         this.$refs['form'].validate(valid => {
4.                 if(valid) {
5.                         if(this.form.ruleId !== undefined) {
6.                                 updateAlarmRule(this.form).then(response => {
7.                                         this.$modal.msgSuccess('修改成功');
8.                                         this.open = false;
9.                                         this.reload();
10.                                 });
11.                         }else {
12.                                 addAlarmRule(this.form).then(response => {
13.                                         this.$modal.msgSuccess('新增成功');
14.                                         this.open = false;
15.                                         this.reload();
16.                                 });
17.                         }
18.                 }
19.         });
20. }

复制代码

注意：上述代码中，没有使用catch方法处理异常。
二、什么是 Uncaught(in promise) error

Uncaught(in promise) error 表现一个Promise被rejected且未处理。

1. const promise = new Promise((resolve, reject) => {
2.   reject('error');
3. });

复制代码

在上面示例中，创建了一个Promise并使用reject方法将其状态设置为rejected。但是，没有在后续代码中处理这个错误，此时就会导致 Uncaught(in promise) error。

三、解决方案

3.1 使用catch方法处理Promise的错误

在Promise中，catch方法被用来处理错误。如果Promise酿成了rejected状态，那么catch方法会被调用。

1. const promise = new Promise((resolve, reject) => {
2.   reject('error');
3. }).catch((error) => {
4.   console.log(error);
5. });

复制代码

在上面示例中，代码添加了catch方法来捕获Promise的错误。如果Promise的状态酿成rejected，那么catch方法会被调用，我们就可以在里面处理这个错误。
我项目中的解决方式如下：
index.js代码

1. export async function addAlarmRule(data) {
2.         const res = await request({
3.                 url: '/device/rule',
4.                 method: 'post',
5.                 data: data
6.         });
7.         if(res.code === 200) {
8.                 return res.data;
9.         }
10.         return Promise.reject(new Error(res.message));
11. }

复制代码

index.vue代码

1. /** 提交按钮 */
2. submitForm: function() {
3.         this.$refs['form'].validate(valid => {
4.                 if(valid) {
5.                         if(this.form.ruleId !== undefined) {
6.                                 updateAlarmRule(this.form).then(response => {
7.                                         this.$modal.msgSuccess('修改成功');
8.                                         this.open = false;
9.                                         this.reload();
10.                                 }).catch((e) => {
11.                                         this.$message.error(e.message);
12.                                 });
13.                         }else {
14.                                 addAlarmRule(this.form).then(response => {
15.                                         this.$modal.msgSuccess('新增成功');
16.                                         this.open = false;
17.                                         this.reload();
18.                                 }).catch((e) => {
19.                                         this.$message.error(e.message);
20.                                 });
21.                         }
22.                 }
23.         });
24. }

复制代码

3.2 使用 async/await 处理Promise的错误

如果代码上不方便使用catch方法或者不能使用catch方法处理Promise的错误，我们可以使用async/await语法糖来捕获Promise的错误。

1. async function asyncFunction() {
2.   try {
3.     const promise = new Promise((resolve, reject) => {
4.       reject('error');
5.     });
6.     const result = await promise;
7.   } catch (error) {
8.     console.log(error);
9.   }
10. }

复制代码

在上述示例中，将Promise的代码放在一个async函数中，并使用await关键字等待Promise对象。如果Promise酿成了rejected状态，try/catch将会捕获这个错误并进行处理。
3.3 全局异常处理

使用window.addEventListener(‘unhandledrejection’, callback)处理全部未处理错误
如果应用程序中有很多Promise，我们可以使用window.addEventListener(‘unhandledrejection’, callback)来处理全部未处理错误。

1. window.addEventListener('unhandledrejection', (event) => {
2.   console.log(event.reason);
3. });

复制代码

四、结论

当我们使用Promise进行异步编程时，Uncaught(in promise) error 是一个常见的错误类型。这种错误类型通常是由于没有处理Promise的错误而导致的。在多数环境下，我们可以使用catch方法或者async/await语法糖来解决这种错误类型。如果应用程序中有很多Promise，我们可以使用window.addEventListener(‘unhandledrejection’, callback)来处理全部未处理的错误。根据代码环境可以使用差别的处理方法。
本文完结！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。