在Angular中,可以使用HttpInterceptor
来拦截所有的HTTP请求,并在请求到达服务器之前进行处理。可以通过拦截器来实现请求挂起几秒钟的效果。下面是一个代码示例:
delay.interceptor.ts
文件,并添加以下代码:import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, timer } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
@Injectable()
export class DelayInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler): Observable> {
// 设置请求挂起的时间(单位:毫秒)
const delayTime = 2000;
// 使用timer创建一个Observable,delayTime之后才会发出数据
const delayObservable = timer(delayTime);
// 使用mergeMap将delayObservable和原始请求进行合并
return delayObservable.pipe(
mergeMap(() => next.handle(req))
);
}
}
app.module.ts
文件中,将DelayInterceptor
添加到提供的拦截器列表中:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DelayInterceptor } from './delay.interceptor';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: DelayInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,每次发送HTTP请求时,请求都会被拦截器挂起指定的时间(这里是2秒),然后才会继续发送到服务器。
下一篇:Angular 7填充表单输入