RxJS 中使用 startWith 操作符的示例-JavaScript中文网-JavaScript教程资源分享门户

在 RxJS 中， startWith 操作符可以用来给一个序列添加一些在它发出任何东西之前就应该发出的项。它通常用于在开始执行某个 Observable 链式调用之前先发送一个控制消息或值。

在本文中，我们将介绍 RxJS 中 startWith 操作符的基本用法，并提供一些示例代码，以帮助您更好地理解它的用法和意义。

基本用法

startWith 操作符的基本用法非常简单，它只需要在 Observable 中传入一些需要在序列发射任何元素之前发出的值即可。startWith 可以接受一个或多个参数，分别表示需要在原始序列前添加的值。

import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';

const source$ = of(1, 2, 3);
const result$ = source$.pipe(startWith(0));

result$.subscribe(console.log); // 0, 1, 2, 3

在上面的代码中，我们首先定义了一个源 Observable，它包含了三个整数 1、2 和 3。然后我们使用 startWith 操作符给这个 Observable 添加了一个值 0，最终生成了一个新的 Observable。这个新的 Observable 在发送数据之前，会先发送 startWith 中指定的 0 。

实际场景中的应用

startWith 操作符的常见应用场景包括但不限于以下几个方面：

1. 初始化某些状态

在一些场景下，我们需要在程序执行之前初始化一些状态变量或者控制参数。例如，在一个网页上显示用户姓名之前，我们需要先从服务器获取当前用户的信息。这时，可以使用 startWith 操作符来发送一个默认值，以保证所有的控件都有初始状态。

import { ajax } from 'rxjs/ajax';
import { map, startWith } from 'rxjs/operators';

const getUserInfo = () => ajax.getJSON('/users/current');

const userName$ = getUserInfo().pipe(
  map((userInfo) => userInfo.name),
  startWith('Loading...'),
);

userName$.subscribe(console.log);

在上面的示例中，我们定义了一个从服务器获取用户信息的异步函数 getUserInfo，它会返回一个 Observable 对象。我们使用 ajax 函数来获取用户信息，然后映射处理得到了一个只包含用户姓名的 Observable，最后使用 startWith 操作符来添加一个默认值 "Loading..." 。这样，在程序启动的时候，我们就可以先显示一个 "Loading..." 的状态，来告诉用户程序正在获取用户信息，保证了程序的友好性和体验。

2. 优化错误处理

在处理一些异步请求的过程中，可能会因为网络状况不良或者服务器端的错误而导致请求失败。这时，我们可以使用 startWith 操作符来添加一个默认值，以确保代码的健壮性和稳定性。例如：

import { fromEvent } from 'rxjs';
import { debounceTime, map, switchMap, startWith } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const searchResult$ = fromEvent(document.querySelector('#search'), 'keyup').pipe(
  debounceTime(300),
  map((event) => event.target.value.trim()),
  switchMap((query) => ajax.getJSON(`https://api.github.com/search/users?q=${query}`)),
  map((response) => response.items),
  startWith([]),
);

searchResult$.subscribe({
  next: (result) => console.log(result),
  error: (error) => console.error('Error:', error),
});

在上面的示例中，我们首先创建了一个搜索框的事件流，然后使用 debounceTime 来处理搜索输入的速度，使用 map 与 switchMap 生成搜索的结果。在这个过程中，如果服务器端出错，会导致 Observable 发生错误。为了增强代码的健壮性，我们使用了 startWith 生成了一个空数组，这样在搜索结果无法获取时，仍然能够返回一个合法的空数组，以保证程序的正常运行。

总结

startWith 操作符是 RxJS 中一个非常实用的操作符，它可以帮助我们解决很多实际问题。在本文中，我们介绍了 startWith 操作符的基本用法和常用场景，并提供了示例代码，供读者参考和学习。我们相信，掌握 startWith 操作符的用法，可以帮助您编写更加健壮、稳定和友好的前端应用程序。

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