解决 Angular 中 Promise 的错误处理问题

在 Angular 项目中，很多时候我们需要通过 Promise 来处理异步操作。但是，当 Promise 在执行过程中出现了错误，我们应该如何处理呢？本文将介绍解决 Angular 中 Promise 错误处理的方法。

Promise 错误处理的问题

在 Angular 中，Promise 可以通过内置的 Promise 类来实现。我们通常会使用 Promise 来进行异步数据请求和操作。例如，我们常常会使用 HttpClient 来获取数据，它的 get() 方法返回的就是一个 Promise 对象。

// www.javascriptcn.com code example
import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Promise<any> {
    return this.http.get('/api/data').toPromise();
  }
}

但是，如果我们的 Promise 对象在执行过程中出现了错误，我们该怎么办呢？如果不进行特殊处理，错误就会被直接抛出，导致应用程序不可用。例如：

// www.javascriptcn.com code example
import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Promise<any> {
    return this.http.get('/api/data/error').toPromise(); // 错误的请求地址
  }
}

// 在组件中调用
this.dataService.getData().then(data => {
  console.log(data); // 不会执行
}).catch(error => {
  console.log(error); // 将会输出请求失败的错误信息
});

在上面的代码中，我们故意给 get() 方法传入了一个错误的请求地址，导致请求失败。此时，then() 方法不会执行，而 catch() 方法会捕获到错误信息并输出。但是，这样处理错误毫无意义，因为错误信息并没有被处理或展示出来，而是被悄悄地丢弃掉了。

解决 Promise 错误处理的方法

要解决 Angular 中 Promise 错误处理的问题，我们需要为 Promise 对象添加一个错误处理函数。在 Promise 对象中，错误处理函数可以通过 catch() 方法来实现。例如，在上面的代码中，如果我们在 getData() 方法中为 Promise 对象添加 catch() 方法来处理错误，就可以在请求失败时做出相应的处理。

// www.javascriptcn.com code example
import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Promise<any> {
    return this.http.get('/api/data/error').toPromise().catch(error => {
      console.log(error); // 将会输出请求失败的错误信息
      throw new Error('请求数据出错，请稍后再试。'); // 抛出自定义的错误信息
    });
  }
}

// 在组件中调用
this.dataService.getData().then(data => {
  console.log(data); // 不会执行
}).catch(error => {
  console.log(error); // 将会输出自定义的错误信息
});

在上面的代码中，我们将 catch() 方法添加到 getData() 方法的 Promise 对象中，在捕获到错误后输出了相应的错误信息，并抛出了一个自定义的错误。在组件中，我们可以通过 catch() 方法捕获到抛出的错误并输出自定义的错误信息。

深入理解 Promise 错误处理

在前面的代码中，我们通过 throw new Error() 来抛出了一个自定义的错误信息。实际上，我们可以在这里抛出任何类型的对象，包括字符串、数字、布尔值等。但是，为了方便后续的错误处理，我们一般都会抛出一个包含错误信息的 Error 对象。

throw new Error('请求数据出错，请稍后再试。'); // 抛出包含错误信息的 Error 对象

在上面的代码中，我们抛出了一个包含错误信息的 Error 对象，这个对象会包含以下三个属性：

• name：表示错误类型的名称，默认为 Error。
• message：表示错误信息的字符串。
• stack：表示错误调用栈的字符串，可用于调试。

例如，在上面抛出的 Error 对象中，name 的默认值为 Error，message 的值为 '请求数据出错，请稍后再试。'，而 stack 的值是一个包含错误调用栈信息的字符串。

当我们在组件中捕获到一个 Promise 错误时，如果想要获取到错误对象的信息，可以在 catch() 方法中将错误对象传递到异步错误处理函数中，并打印出相关的信息。

this.dataService.getData().then(data => {
  console.log(data);
}).catch(error => {
  console.error('请求数据失败：', error.message); // 打印出错误信息
  this.showError(error); // 弹出错误提示框
});

在上面的代码中，我们通过 console.error() 打印了错误信息，并通过 this.showError() 方法弹出了一个错误提示框。实际上，我们可以在这里进行任何类型的异步错误处理，例如：

• 向服务器提交错误信息以便进行分析和记录。
• 显示一个错误提示框给用户，告诉他们出现了什么错误并如何解决。
• 自动尝试重新发起请求，以便在发生错误后自动重试请求，减少用户的负担。

示例代码

下面是一个完整的数据服务示例，演示了如何为 Promise 对象添加错误处理函数，并显示错误信息和提示框。

// www.javascriptcn.com code example
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Promise<any> {
    return this.http.get('/api/data/error').toPromise().catch(error => {
      console.log(error); // 输出错误信息
      throw new Error('请求数据出错，请稍后再试。'); // 抛出自定义的错误
    });
  }
}

@Component({
  selector: 'app-root',
  template: `<div>{{ data }}</div>`,
})
export class AppComponent {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    this.dataService.getData().then(data => {
      this.data = data;
    }).catch(error => {
      console.error('请求数据失败：', error.message); // 打印出错误信息
      this.showError(error); // 弹出错误提示框
    });
  }

  showError(error: Error) {
    // code here:
    // 弹出错误提示框
  }
}

在上面的代码中，我们创建了一个数据服务类 DataService，并在其中实现了带错误处理功能的数据获取方法。我们还创建了一个 AppComponent 组件，在其中调用 getData() 方法获取数据，并根据返回值进行视图的更新。如果请求失败，我们将会在 catch() 方法中捕获到错误信息，并打印出相关的信息和弹出一个错误提示框。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0366de46428fe9ecf5c8d