在Angular 17中,HTTP拦截器可能不会在HTTP调用中触发的一个可能原因是没有正确地配置拦截器提供者。下面是一个示例解决方法:
HttpInterceptor
接口。import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler): Observable> {
// 在此处添加拦截器逻辑
return next.handle(req);
}
}
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './interceptor.service';
@NgModule({
imports: [HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
请确保将MyInterceptor
添加到providers
数组中,并将multi
属性设置为true
。
HttpClient
进行请求。import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private http: HttpClient) { }
makeRequest() {
this.http.get('https://api.example.com/data').subscribe(response => {
console.log(response);
});
}
}
在上述代码中,我们使用HttpClient
进行HTTP请求,这样才能触发配置的拦截器。
通过以上步骤,您应该能够在Angular 17中正确地触发HTTP拦截器。