RxJS 中使用 catchError() 操作符处理服务器错误并进行回退
在我们的 Web 应用程序中，从服务器获取数据是一项非常重要的任务之一。然而，在现实世界中，可能会出现许多错误，例如服务器故障、网络问题等。这就需要我们针对异常情况编写代码以便我们能够进行错误处理。
RxJS 的 catchError() 操作符可以帮助我们实现这一点。它能捕捉 Observable 流发出的错误，并提供一种方法来处理这些错误。
使用 catchError() 操作符的语法如下：
source$.pipe( catchError(handler) );
该代码通过 pipe() 方法将 catchError() 操作符应用于 Observable 流上。handler 参数表示一个函数，用于处理 Observable 流发出的错误。它可以返回一个 Observable、Promise 或任何其他可观察对象。
在处理任何发生的错误时，catchError() 操作符始终会选择错误处理程序中的第一个可观察对象并将其发出。如果处理程序返回 Observable，则 catchError() 操作符将继续观察该 Observable，并在其发出任何值时继续发出该值。
为了帮助您更好地理解，我们来看一些实例代码。
假设我们有一个从服务器获取数据的 Observable 流的示例：
const fetchData$ = ajax.getJSON('/api/data');然后，我们可以使用 catchError() 操作符将错误处理程序与 fetchData$ 关联起来并在发生错误时切换到后备可观察对象：
fetchData$.pipe( catchError(error => backupData$) );
在此示例中，当 fetchData$ 抛出错误时，RxJS 会从 backupData$ 可观察对象中发出值。
请注意，备份可观察对象可以是任何 Observable，包括 Promise 和任何其他组合和自定义可观察对象。
除了错误处理程序之外，我们还可以利用 catchError() 操作符来处理特定类型的错误。下面是一个实例代码：
// javascriptcn.com 代码示例
fetchData$.pipe(
catchError(error => {
if (error.statusCode === 404) {
return throwError("Data not found");
} else {
return throwError(error);
}
})
);在此示例中，当服务器返回 404 文件不存在的错误时，catchError() 操作符将抛出带有消息 Data not found 的错误。对于其他所有类型的错误，catchError() 操作符都会重新抛出同一错误以便其他操作符（例如 retry()）可以处理它们。
总结
在从服务器获取数据方面，我们经常会遇到各种各样的错误。RxJS 的 catchError() 操作符提供了一种处理 Observable 流发出的错误的方法。我们可以使用这个操作符来切换到后备可观察对象、处理特定类型的错误和重新抛出错误以供其他操作符处理。希望这篇文章能够帮助你更好地理解捕捉和处理 RxJS Observable 流中的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652ce0797d4982a6ebe6aac6