RxJS 实践：如何使用 catchError 处理异常

简介

RxJS 是一个非常强大的 JavaScript 库，它提供了丰富的操作符和工具，用于处理异步数据流。其中，catchError 操作符是一个非常有用的工具，它可以帮助我们处理 RxJS 流中的异常。

在本文中，我们将介绍 catchError 操作符的基本用法，以及如何在实际项目中使用它来处理异常。

catchError 操作符的基本用法

catchError 操作符的作用是捕获 RxJS 流中的异常，并返回一个备用的流。它的基本语法如下：

source$.pipe(
  catchError((err) => {
    // 处理异常
    return backup$;
  })
);

其中，source$ 是一个 RxJS 流，catchError 接收一个回调函数，该函数处理异常，并返回一个备用的流 backup$。

实践示例

下面我们将通过一个实际的示例来演示如何使用 catchError 操作符处理异常。

假设我们有一个使用 RxJS 实现的搜索框，当用户在搜索框中输入关键字时，我们会向服务器发送一个请求，并将响应的数据展示在页面上。我们的代码如下：

const searchInput = document.querySelector('#search-input');
const searchResult = document.querySelector('#search-result');

const search$ = fromEvent(searchInput, 'input').pipe(
  debounceTime(500),
  map((event) => event.target.value),
  switchMap((query) => {
    return ajax.getJSON(`https://api.github.com/search/users?q=${query}`);
  })
);

search$.subscribe((data) => {
  searchResult.innerHTML = data.items
    .map((item) => `<li>${item.login}</li>`)
    .join('');
});

在上面的代码中，我们使用 fromEvent 创建一个流，监听搜索框的 input 事件；使用 debounceTime 和 map 操作符对用户输入进行处理；使用 switchMap 操作符发送请求，并将响应的数据展示在页面上。

现在，假设我们的服务器出现了问题，无法正常响应请求。此时，我们的代码将会抛出一个异常，并导致程序崩溃。这显然是不可接受的，我们需要使用 catchError 操作符来处理这种情况。

修改代码如下：

const searchInput = document.querySelector('#search-input');
const searchResult = document.querySelector('#search-result');

const search$ = fromEvent(searchInput, 'input').pipe(
  debounceTime(500),
  map((event) => event.target.value),
  switchMap((query) => {
    return ajax.getJSON(`https://api.github.com/search/users?q=${query}`).pipe(
      catchError((err) => {
        console.error(err);
        return of({ items: [] });
      })
    );
  })
);

search$.subscribe((data) => {
  searchResult.innerHTML = data.items
    .map((item) => `<li>${item.login}</li>`)
    .join('');
});

在上面的代码中，我们使用 catchError 操作符捕获了 ajax.getJSON 抛出的异常，并打印了错误信息。同时，我们返回了一个备用的流，该流包含一个空数组，用于展示搜索结果为空的情况。

总结

catchError 操作符是 RxJS 中非常有用的一个工具，它可以帮助我们处理 RxJS 流中的异常。在实际项目中，我们经常需要使用它来保证程序的稳定性。本文介绍了 catchError 操作符的基本用法，并通过一个实际的示例演示了如何在搜索框中使用它来处理异常。希望这篇文章能够帮助你更好地理解 RxJS，并能够在实际项目中使用它来提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bb485cadd4f0e0ff3fb48f