要在 Angular 17 中订阅服务时捕获错误并切换加载或其他 UI 状态，您可以使用 observables 的 subscribe 方法以及 RxJS 运算符（如 catchError）。以下是分步方法：
示例：
1。带有加载指示器的服务呼叫：
2。处理错误：
示例代码：
import { Component } from '@angular/core';
import { MyService } from './my-service.service'; // Your service here
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { ToastrService } from 'ngx-toastr'; // If you are using Toastr for notifications
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html'
})
export class MyComponent {
loading = false; // Flag to toggle loading indicator
data: any = null; // Variable to hold the service response data
constructor(private myService: MyService, private toastr: ToastrService) { }
getData() {
this.loading = true; // Start loading before the service call
this.myService.getData() // Call the service method
.pipe(
catchError((error) => {
this.toastr.error('Failed to fetch data', 'Error'); // Show an error notification
console.error(error); // Log the error (optional)
this.loading = false; // Stop loading on error
return of(null); // Return an empty observable to prevent further issues
})
)
.subscribe(
(response) => {
this.data = response; // Handle successful response
this.toastr.success('Data fetched successfully!', 'Success'); // Success notification
},
() => {
this.loading = false; // Stop loading on error (handled in catchError as well)
},
() => {
this.loading = false; // Stop loading on completion (either success or error)
}
);
}
}
要点：
加载标志：加载标志用于显示/隐藏加载微调器。它在服务调用之前设置为 true，并在错误和完成回调中重置为 false。
错误处理：catchError 运算符用于捕获错误、处理错误（例如，记录错误、显示通知）并防止应用程序崩溃。它返回一个空的 observable (of(null))，以便订阅可以完成。
Toastr 通知：ToastrService 用于显示成功和错误事件的通知。如果您使用其他东西，请根据您的通知系统进行调整。
此方法可帮助您维护加载状态、捕获错误并优雅地处理成功和失败场景，同时保持 UI 响应能力。
以上是Angular 中的全局错误处理的详细内容。更多信息请关注PHP中文网其他相关文章！
