Angular怎么实现错误处理和请求拦截

{
"/api":{
"target":"http://124.223.71.181",
"secure":true,
"logLevel":"debug",
"changeOrigin":true,
"headers":{
"Origin":"http://124.223.71.181"
}
}
}

import{HttpClient}from'@angular/common/http';
import{Injectable}from'@angular/core';
import{environment}from'@env';

@Injectable({providedIn:'root'})
exportclassHttpService{
constructor(privatehttp:HttpClient){}

publicechoCode(method:'get'|'post'|'delete'|'put'|'patch'='get',params:{code:number}){
switch(method){
case'get':
case'delete':
returnthis.http[method](`${environment.backend}/echo-code`,{params});
case'patch':
case'put':
case'post':
returnthis.http[method](`${environment.backend}/echo-code`,params);
}
}
}

import{Component,OnInit}from'@angular/core';
import{HttpService}from'./http.service';

@Component({
selector:'http',
standalone:true,
templateUrl:'./http.component.html',
})
exportclassHttpComponentimplementsOnInit{
constructor(privatehttp:HttpService){}
ngOnInit():void{
this.http.echoCode('get',{code:200}).subscribe(console.log);
this.http.echoCode('post',{code:200}).subscribe(console.log);
this.http.echoCode('delete',{code:301}).subscribe(console.log);
this.http.echoCode('put',{code:403}).subscribe(console.log);
this.http.echoCode('patch',{code:500}).subscribe(console.log);
}
}

this.http
.echoCode('get',{code:200})
.pipe(catchError((err:HttpErrorResponse)=>of(err)))
.subscribe((x)=>{
if(xinstanceofHttpErrorResponse){
//dosomething
}else{
//dosomething
}
});

import{HttpInterceptor,HttpRequest,HttpHandler,HttpResponse,HttpErrorResponse}from'@angular/common/http';
import{Injectable}from'@angular/core';
import{Observable,of,throwError}from'rxjs';
import{filter,catchError}from'rxjs/operators';
import{HttpEvent}from'@angular/common/http';

@Injectable()
exportclassHttpInterceptorServiceimplementsHttpInterceptor{
constructor(){}
intercept(req:HttpRequest,next:HttpHandler):Observable>{
returnnext
.handle(req)
.pipe(filter((event)=>eventinstanceofHttpResponse))
.pipe(
catchError((error)=>{
console.log('catcherror',error);
returnof(error);
})
);
}
}

@NgModule({
imports:[RouterModule.forChild(routes)],
exports:[RouterModule],
providers:[
{
provide:HTTP_INTERCEPTORS,
useClass:HttpInterceptorService,
multi:true,
},
],
})
免费云主机、域名
exportclassXXXModule{}