在前端开发中，我们经常需要处理异步请求。而在处理异步请求时，往往会遇到一些异常情况，比如请求超时、网络错误等。这时候，我们需要使用一些特殊的操作符来处理这些异常情况。本文将介绍 RxJS 中的 pluck 和 timeoutWith 操作符，并展示如何使用它们来处理异常请求。
pluck 操作符
pluck 操作符用于从 Observable 中提取指定属性的值。它的语法如下：
pluck<T, R>(...properties: string[]): OperatorFunction<T, R>
其中，T 表示源 Observable 中的元素类型，R 表示 pluck 操作符返回的值类型。properties 参数表示要提取的属性名称，可以传入多个属性名称，pluck 操作符会按照顺序依次提取这些属性的值。
下面是一个简单的示例，展示如何使用 pluck 操作符从一个 Observable 中提取指定属性的值：
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ----- - ---- ----------------- ----- ------- - --- - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- -- -- --------------------------------------------------- -- --------- ---- -------
在上面的示例中，我们创建了一个 Observable source$，它发出了三个对象，每个对象都有 name 和 age 两个属性。我们使用 pluck 操作符从 source$ 中提取了 name 属性的值，并将这些值输出到控制台。
timeoutWith 操作符
timeoutWith 操作符用于在 Observable 超时时，返回另一个 Observable。它的语法如下：
timeoutWith<T, R>(due: number | Date, withObservable: ObservableInput<R>): OperatorFunction<T, T | R>
其中，due 参数表示超时时间，可以是数字类型的毫秒数，也可以是 Date 类型的时间戳。withObservable 参数表示当超时时要返回的 Observable。
下面是一个简单的示例，展示如何使用 timeoutWith 操作符处理超时请求：
import { of } from 'rxjs';
import { delay, timeoutWith } from 'rxjs/operators';
const source$ = of('Hello').pipe(delay(2000));
source$.pipe(timeoutWith(1000, of('Request timed out!'))).subscribe(console.log);
// 输出：Request timed out!在上面的示例中，我们创建了一个 Observable source$，它会延迟 2 秒钟才发出一个值 'Hello'。我们使用 timeoutWith 操作符设置超时时间为 1 秒钟，当 source$ 还没有发出值时就超时了，timeoutWith 操作符会返回另一个 Observable，该 Observable 发出一个字符串 'Request timed out!'。
处理异常请求
现在我们来看一个更实际的例子，展示如何使用 pluck 和 timeoutWith 操作符处理异常请求。
假设我们要从一个 API 中获取用户的信息，API 的地址为 https://example.com/api/users/{id}，其中 {id} 是用户的 ID。我们可以使用 RxJS 的 ajax 函数来发起请求，它会返回一个 Observable，我们可以使用 map 操作符来提取响应中的用户信息。
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
function getUserInfo(id: number) {
const url = `https://example.com/api/users/${id}`;
return ajax.getJSON(url).pipe(map(response => response.data));
}在上面的代码中，我们定义了一个函数 getUserInfo，它接受一个用户 ID，然后使用 ajax 函数发起一个 GET 请求，获取用户信息。我们使用 map 操作符提取响应中的 data 属性，这个属性包含了用户信息。
现在我们要处理两种异常情况：一是请求超时，二是请求错误。对于请求超时，我们可以使用 timeoutWith 操作符返回一个错误信息；对于请求错误，我们可以使用 catchError 操作符捕获错误并返回一个错误信息。最后，我们可以使用 pluck 操作符提取用户信息中的 name 和 email 属性。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ----------- ---- ------ ----------- - ---- -----------------
-------- --------------- ------- -
----- --- - --------------------------------------
------ -----------------------
------------ -- ---------------
----------------- ----------- ----- --------
---------------- -- ----------- ----------
------------- ---------
--
-在上面的代码中，我们在 ajax 函数的返回值上使用了一系列操作符。首先，我们使用 map 操作符提取响应中的 data 属性；接着，我们使用 timeoutWith 操作符设置超时时间为 5 秒，当请求超时时返回一个字符串 'Request timed out!'；然后，我们使用 catchError 操作符捕获错误，当请求错误时返回一个字符串 'Request error!'；最后，我们使用 pluck 操作符提取用户信息中的 name 和 email 属性。
现在我们可以调用 getUserInfo 函数来获取用户信息了：
getUserInfo(123).subscribe(console.log); // 输出：Alice, alice@example.com getUserInfo(456).subscribe(console.log); // 输出：Request error! getUserInfo(789).subscribe(console.log); // 输出：Request timed out!
在上面的代码中，我们分别调用了 getUserInfo 函数来获取三个用户的信息。第一个用户的信息请求成功了，我们从响应中提取了 name 和 email 属性，并将它们输出到控制台。第二个用户的信息请求失败了，我们捕获了错误，并返回了一个错误信息。第三个用户的信息请求超时了，我们使用 timeoutWith 操作符返回了一个超时信息。
结论
本文介绍了 RxJS 中的 pluck 和 timeoutWith 操作符，并展示了如何使用它们来处理异常请求。在实际开发中，我们经常需要处理异常请求，这时候使用这些操作符可以让我们的代码更加简洁、清晰和可维护。希望本文能够对大家学习和使用 RxJS 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675bad57a4d13391d8f69f35