超级会员免费看
RxJS 基础与错误处理：原理、示例与应用
1. switchMap 操作符
在 RxJS 中，
switchMap
操作符是一个强大且实用的工具。与
flatMap
不同，
flatMap
会展开并合并来自外部可观察对象的所有数据，而
switchMap
虽然也处理来自外部可观察对象的数据，但当外部可观察对象发出新值时，它会取消正在处理的内部订阅。
通过一个大理石图可以更直观地理解
switchMap
的工作原理。假设外部可观察对象依次发出红、绿、蓝三个圆圈。当发出红色圆圈时，
switchMap
将内部可观察对象的元素（红色菱形和正方形）发送到输出流，且处理过程没有中断，因为绿色圆圈是在内部可观察对象处理完后才发出的。然而，当处理绿色圆圈时，
switchMap
成功展开并发出了绿色菱形，但在处理绿色正方形之前，蓝色圆圈到达了。此时，对绿色内部可观察对象的订阅被取消，绿色正方形不会被发送到输出流，
switchMap
转而处理蓝色内部可观察对象。
以下是一个使用
switchMap
的代码示例：
let outer$ = interval(1000)
.pipe(take(2));
let combined$ = outer$
.pipe(switchMap((x) => {
return interval(400)
.pipe(
take(3),
map(y => `outer ${x}: inner ${y}`)
)
})
);
combined$.subscribe(result => console.log(`${result}`));
上述代码中，外部可观察对象使用
interval(1000)
每秒发出一个序号，并通过
take(2)
限制只发出两个值：0 和 1。每个值传递给
switchMap
操作符，内部可观察对象以 400 毫秒的间隔发出三个数字。代码的输出如下：
outer 0: inner 0
outer 0: inner 1
outer 1: inner 0
outer 1: inner 1
outer 1: inner 2
可以注意到，第一个内部可观察对象没有发出其第三个值 2。这是因为在 1000 毫秒时，外部可观察对象发出了 1，此时内部可观察对象被取消订阅。而第二个外部值的三个内部发射没有中断，因为它没有再发出新值。
switchMap
操作符在实际应用中有很多场景。例如，当用户在输入框中输入内容（外部可观察对象），每次按键抬起事件都会触发 HTTP 请求（内部可观察对象）。如果用户在第二个字符的 HTTP 请求仍在进行时输入了第三个字符，那么第二个字符的内部可观察对象将被取消并丢弃。
2. 错误处理：catchError 操作符
在响应式编程中，一个响应式应用应该具备弹性，即能够在出现故障时实施相应的程序以保持运行。可观察对象可以通过调用观察者的
error()
函数来发出错误，但当
error()
方法被调用时，流会完成。
RxJS 提供了几个操作符，用于在错误到达观察者的
error()
方法之前拦截和处理错误：
-
catchError(error)
：拦截错误，并可以实现一些业务逻辑来处理它。
-
retry(n)
：最多重试错误操作 n 次。
-
retryWhen(fn)
：根据提供的函数重试错误操作。
下面是一个使用可管道化
catchError
操作符的示例：
.pipe(
catchError(err => {
console.error(`Got ${err.status}: ${err.description}`);
if (err.status === 500) {
console.error(">>> Retrieving cached data");
return getCachedData();
} else {
return EMPTY;
}
})
)
在上述代码中，
catchError
操作符内部检查错误状态，并根据不同的状态做出相应的反应。如果错误状态为 500，将切换到另一个数据生产者以获取缓存数据；如果错误状态不是 500，代码将返回一个空的可观察对象，数据流将完成。无论哪种情况，观察者的
error()
方法都不会被调用。
以下是一个完整的示例，订阅来自主要数据源
getData()
的啤酒流，该数据源会随机生成状态为 500 的错误：
function getData() {
const beers = [
{ name: "Sam Adams", country: "USA", price: 8.50 },
{ name: "Bud Light", country: "USA", price: 6.50 },
{ name: "Brooklyn Lager", country: "USA", price: 8.00 },
{ name: "Sapporo", country: "Japan", price: 7.50 }
];
return Observable.create(observer => {
let counter = 0;
beers.forEach(beer => {
observer.next(beer);
counter++;
if (counter > Math.random() * 5) {
observer.error({
status: 500,
description: "Beer stream error"
});
}
});
observer.complete();
});
}
// 订阅主要数据源的数据
getData()
.pipe(
catchError(err => {
console.error(`Got ${err.status}: ${err.description}`);
if (err.status === 500) {
console.error(">>> Retrieving cached data");
return getCachedData();
} else {
return EMPTY;
}
}),
map(beer => `${beer.name}, ${beer.country}`)
)
.subscribe(
beer => console.log(`Subscriber got ${beer}`),
err => console.error(err),
() => console.log("The stream is over")
);
function getCachedData() {
const beers = [
{ name: "Leffe Blonde", country: "Belgium", price: 9.50 },
{ name: "Miller Lite", country: "USA", price: 8.50 },
{ name: "Corona", country: "Mexico", price: 8.00 },
{ name: "Asahi", country: "Japan", price: 7.50 }
];
return Observable.create(observer => {
beers.forEach(beer => {
observer.next(beer);
});
observer.complete();
});
}
该程序的输出可能如下：
Subscriber got Sam Adams, USA
Subscriber got Bud Light, USA
Got 500: Beer stream error
>>> Retrieving cached data
Subscriber got Leffe Blonde, Belgium
Subscriber got Miller Lite, USA
Subscriber got Corona, Mexico
Subscriber got Asahi, Japan
The stream is over
3. 其他相关知识
-
interval() 函数
：
interval()函数在需要根据指定的时间间隔定期调用另一个函数时非常有用。例如，interval(1000).subscribe(n => doSomething())会每秒调用一次doSomething()函数。 -
Angular 应用中的相关概念
- 组件通信 ：在 Angular 应用中，组件之间的通信方式有多种。可以通过暴露子组件的 API、使用输入属性、输出属性和自定义事件等方式实现组件间的通信。还可以使用中介设计模式，通过共同的父组件或可注入服务作为中介来实现组件间的通信。
- 依赖注入 ：依赖注入是 Angular 中的一个重要概念，它可以实现松耦合和可重用性，提高代码的可测试性。在 Angular 中，可以通过构造函数注入服务，还可以在模块化应用中使用不同的方式声明和管理提供者。
- 表单验证 ：Angular Forms API 提供了丰富的表单验证功能，包括内置验证器和自定义验证器。可以使用异步验证器来检查表单值，还可以动态更改验证器。
- 路由 ：Angular 中的路由系统允许实现客户端导航，包括哈希导航和基于历史 API 的导航。可以使用路由守卫来控制路由访问，还可以进行路由参数的传递和提取。
- 测试 ：Angular 应用的测试包括单元测试和端到端测试。可以使用 Jasmine 框架编写单元测试脚本，并使用 Karma 运行这些脚本。端到端测试可以使用 Protractor 进行，它可以模拟用户在浏览器中的操作。
通过学习和掌握 RxJS 的
switchMap
操作符和错误处理机制，以及 Angular 应用中的相关概念和技术，可以更好地开发出高效、稳定和易于维护的应用程序。
4. 总结
本文详细介绍了 RxJS 中的
switchMap
操作符和
catchError
错误处理操作符的原理和使用方法，并结合 Angular 应用中的相关概念进行了说明。
switchMap
操作符在处理外部可观察对象发出新值时取消内部订阅的特性，使其在很多场景下非常实用，如处理用户输入触发的 HTTP 请求。而
catchError
操作符则可以帮助我们在出现错误时进行有效的处理，保证应用的稳定性。同时，还介绍了 Angular 应用中的组件通信、依赖注入、表单验证、路由和测试等方面的知识，这些知识对于开发高质量的 Angular 应用至关重要。
在实际开发中，可以根据具体需求灵活运用这些技术，提高开发效率和代码质量。例如，在处理复杂的异步操作时，可以使用
switchMap
操作符避免不必要的请求；在处理错误时，使用
catchError
操作符实现错误拦截和处理。同时，合理运用 Angular 应用中的各种机制，可以使应用的结构更加清晰，易于维护和扩展。
希望本文能够帮助读者更好地理解和应用 RxJS 和 Angular 相关技术，在开发过程中取得更好的效果。
RxJS 基础与错误处理：原理、示例与应用
5. 代码示例分析
以下是对前面代码示例的进一步分析，帮助大家更好地理解
switchMap
和
catchError
的实际应用。
5.1 switchMap 代码示例
let outer$ = interval(1000)
.pipe(take(2));
let combined$ = outer$
.pipe(switchMap((x) => {
return interval(400)
.pipe(
take(3),
map(y => `outer ${x}: inner ${y}`)
)
})
);
combined$.subscribe(result => console.log(`${result}`));
-
代码流程
：
-
outer$是一个每秒发出一个序号的可观察对象，通过take(2)限制只发出两个值（0 和 1）。 -
switchMap操作符接收outer$发出的值，并返回一个新的可观察对象。这个新的可观察对象以 400 毫秒的间隔发出三个数字，并通过map操作符将其转换为特定格式的字符串。 -
当
outer$发出新值时，之前正在处理的内部可观察对象会被取消。
-
-
输出结果分析
：
-
由于
outer$在 1000 毫秒时发出新值 1，此时第一个内部可观察对象还未完成，所以它的第三个值不会被发出。而第二个内部可观察对象的三个值会正常发出。
-
由于
5.2 catchError 代码示例
function getData() {
const beers = [
{ name: "Sam Adams", country: "USA", price: 8.50 },
{ name: "Bud Light", country: "USA", price: 6.50 },
{ name: "Brooklyn Lager", country: "USA", price: 8.00 },
{ name: "Sapporo", country: "Japan", price: 7.50 }
];
return Observable.create(observer => {
let counter = 0;
beers.forEach(beer => {
observer.next(beer);
counter++;
if (counter > Math.random() * 5) {
observer.error({
status: 500,
description: "Beer stream error"
});
}
});
observer.complete();
});
}
// 订阅主要数据源的数据
getData()
.pipe(
catchError(err => {
console.error(`Got ${err.status}: ${err.description}`);
if (err.status === 500) {
console.error(">>> Retrieving cached data");
return getCachedData();
} else {
return EMPTY;
}
}),
map(beer => `${beer.name}, ${beer.country}`)
)
.subscribe(
beer => console.log(`Subscriber got ${beer}`),
err => console.error(err),
() => console.log("The stream is over")
);
function getCachedData() {
const beers = [
{ name: "Leffe Blonde", country: "Belgium", price: 9.50 },
{ name: "Miller Lite", country: "USA", price: 8.50 },
{ name: "Corona", country: "Mexico", price: 8.00 },
{ name: "Asahi", country: "Japan", price: 7.50 }
];
return Observable.create(observer => {
beers.forEach(beer => {
observer.next(beer);
});
observer.complete();
});
}
-
代码流程
：
-
getData()函数返回一个可观察对象，它会依次发出啤酒数据，并且可能会随机发出状态为 500 的错误。 -
catchError操作符拦截错误，并根据错误状态进行不同的处理。如果错误状态为 500，会切换到getCachedData()函数获取缓存数据；否则返回一个空的可观察对象。 -
最后通过
map操作符将啤酒数据转换为特定格式的字符串，并进行订阅。
-
-
输出结果分析
：
-
当
getData()发出错误时，会根据错误状态进行相应的处理。如果是 500 错误，会输出错误信息并获取缓存数据；如果不是 500 错误，数据流会直接完成。
-
当
6. 实际应用场景
6.1 switchMap 的应用场景
-
用户输入触发的 HTTP 请求
：当用户在输入框中输入内容时，每次按键抬起事件都会触发一个 HTTP 请求。使用
switchMap操作符可以确保在用户连续输入时，只处理最后一次输入触发的请求，避免不必要的请求。 -
实时搜索
：在实时搜索功能中，用户输入关键词时会实时发起搜索请求。使用
switchMap可以保证只处理最新的搜索请求，提高搜索效率。
6.2 catchError 的应用场景
-
网络请求错误处理
：在进行 HTTP 请求时，可能会出现各种错误，如网络超时、服务器错误等。使用
catchError操作符可以拦截这些错误，并进行相应的处理，如显示错误提示、重试请求或获取缓存数据。 -
数据加载错误处理
：当加载数据时，如果出现错误，可以使用
catchError操作符进行错误处理，保证应用的稳定性。
7. 总结与展望
通过本文的介绍，我们深入了解了 RxJS 中的
switchMap
操作符和
catchError
错误处理操作符的原理和应用，以及 Angular 应用中的相关概念和技术。这些知识对于开发高效、稳定和易于维护的应用程序非常重要。
在未来的开发中，可以进一步探索 RxJS 的其他操作符和功能，以及 Angular 框架的更多特性。例如，可以学习如何使用
mergeMap
、
concatMap
等操作符处理不同场景下的异步操作，还可以深入研究 Angular 的状态管理库，如 NgRx，以更好地管理应用的状态。
同时，不断实践和应用这些技术，结合实际项目的需求，灵活运用各种技术手段，提高开发效率和代码质量。相信通过不断学习和实践，能够开发出更加优秀的应用程序。
以下是一个简单的 mermaid 流程图，展示
switchMap
操作符的工作原理：
graph LR
A[外部可观察对象] --> B{发出新值?}
B -- 是 --> C[取消内部订阅]
B -- 否 --> D[继续处理内部订阅]
C --> E[处理新的内部订阅]
D --> F[输出内部订阅结果]
E --> F
另外，为了更清晰地对比
switchMap
和
flatMap
的区别，我们可以列出一个表格：
| 操作符 | 处理方式 | 特点 |
| ---- | ---- | ---- |
|
switchMap
| 当外部可观察对象发出新值时，取消正在处理的内部订阅 | 只处理最新的内部订阅 |
|
flatMap
| 展开并合并来自外部可观察对象的所有数据 | 处理所有内部订阅 |
通过这些图表和表格，希望能帮助大家更好地理解和掌握本文介绍的知识。
扫一扫
34
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
