在前端开发中，我们经常需要处理多个数据流的协同工作，比如用多个 http 请求获取多个不同的数据源，然后组合在一起渲染界面，这时候，我们需要使用一些特殊的操作符来帮助我们完成这些复杂的任务。
RxJS 中提供了一系列的操作符，其中 combineLatest 就是其中之一，它能够将多个数据流的最新值合并在一起，并输出一个新的数据流。
combineLatest 的基本使用
combineLatest 操作符的基本用法如下：
// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';
const observable1 = ...;
const observable2 = ...;
combineLatest(observable1, observable2)
.subscribe(([value1, value2]) => {
console.log(`observable1: ${value1}, observable2: ${value2}`);
});如上所示，combineLatest 接收多个 observable 作为参数，并在每个 observable 发出新值时将它们的最新值合并为一个新的值，并将其作为一个数组发送给订阅者。
比如，如果 observable1 发出值 "a"，然后 observable2 发出值 "b"，那么订阅者将收到 ["a", "b"]。
除了接收多个 observable，combineLatest 还接受一个可选的 projection 函数作为参数，它可以将输出值转换为我们需要的格式：
// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';
const observable1 = ...;
const observable2 = ...;
combineLatest(
observable1,
observable2,
(value1, value2) => ({ value1, value2 })
)
.subscribe(({ value1, value2 }) => {
console.log(`value1: ${value1}, value2: ${value2}`);
});如上所示，在 projection 函数中，我们可以将输入值转换为一个新的对象，并在订阅时进行解构。这样可以使我们的代码更加清晰易读。
combineLatest 的常见用法
1. 组合多个 http 请求
在前端开发中，我们通常需要多个 http 请求来获取不同的数据源，然后组合在一起渲染界面。
combineLatest 操作符正是为这样的场景而设计的。我们只需要将多个 http 请求的 observable 传递给 combineLatest，它将返回一个新的 observable，该 observable 会在每个请求都成功返回时发出新值，并将所有请求的结果合并起来。
以下是一个示例代码：
// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
const user$ = this.http.get('/api/user').pipe(
map(response => response.json())
);
const products$ = this.http.get('/api/products').pipe(
map(response => response.json())
);
combineLatest(user$, products$).pipe(
map(([user, products]) => {
return {
user,
products
};
})
).subscribe(data => {
console.log(data.user, data.products);
});如上所示，我们通过 combineLatest 组合了两个 http 请求的 observable，并且用 map 运算符将它们的最终结果转换为我们需要的格式。
2. 处理复杂的用户输入场景
在某些情况下，我们需要处理多个用户输入的场景，比如：
- 用户输入账号和密码，然后点击登录按钮；
- 用户在输入框中输入一个值，然后点击搜索按钮。
对于这些场景，我们可以将用户输入的每个字段都转换为一个 observable，然后将它们组合在一起，这样可以更加灵活地处理用户输入。
例如，以下是一个示例代码：
// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';
const username$ = fromEvent(document.querySelector('input[name=username]'), 'input').pipe(
map(event => event.target.value),
startWith('')
);
const password$ = fromEvent(document.querySelector('input[name=password]'), 'input').pipe(
map(event => event.target.value),
startWith('')
);
const loginButton$ = fromEvent(document.querySelector('button[name=login]'), 'click');
combineLatest(username$, password$, loginButton$).subscribe(([username, password]) => {
if (username && password) {
console.log(`User ${username} is attempting to login with password ${password}`);
}
});如上所示，我们将输入框和按钮事件都转换为 observable，并将它们组合在一起。然后，在订阅时，我们可以轻松地处理这些事件并执行需要的操作。
3. 动态更新列表
在某些情况下，我们需要在列表中显示多个数据源，并在任何一个数据源发生变化时，动态更新列表。例如，我们需要同时显示用户收到的所有邮件和未读邮件。
使用 combineLatest 可以轻松地实现这一点。我们只需要将多个数据源的 observable 组合在一起，并在订阅时更新界面即可。
以下是一个示例代码：
// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
const allEmails$ = ...; // 所有邮件的 observable
const unreadEmails$ = ...; // 未读邮件的 observable
combineLatest(allEmails$, unreadEmails$).pipe(
map(([allEmails, unreadEmails]) => {
const emails = allEmails.map(email => {
const isUnread = unreadEmails.includes(email);
return {
...email,
isUnread
};
});
return emails;
})
).subscribe(emails => {
// 更新界面
});如上所示，我们通过 combineLatest 将所有邮件和未读邮件的 observable 组合在一起，并用 map 运算符将它们合并为一个新的对象。最终，我们可以将更新后的列表渲染到界面上。
总结
combineLatest 操作符是 RxJS 中一个非常有用的操作符，它可以帮助我们处理多个数据流之间的协同工作，并使我们的代码更加简洁易懂。
在实际开发中，我们可以根据需求灵活地使用 combineLatest 操作符来解决各种复杂的问题，比如多个 http 请求、多个输入框、动态列表等。
希望本文能够帮助大家更好地理解 RxJS 中的 combineLatest 操作符，并在实际开发中得到应用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6461a8ad968c7c53b0302b7e