拦截http响应时请求被发送两次
问题描述:
它发现当我们拦截HTTP响应并使用subscribe获取Observable响应中的值时,会触发2次请求。下面是代码拦截http响应时请求被发送两次
Intercerpting HTTP请求和响应通过延长它(http.service.ts)
import { Injectable } from '@angular/core';
import { Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers, ConnectionBackend } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { LoggedInUserApi } from './loggedInUser.service';
@Injectable()
export class HttpService extends Http {
constructor(private loggedInUserApi: LoggedInUserApi, backend: XHRBackend, options: RequestOptions) {
super(backend, options);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.request(url, options));
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.get(url, options));
}
post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.post(url, body, options));
}
put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.put(url, body, options));
}
delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.delete(url, options));
}
handleResponseHeader(header) {
console.log(header);
}
intercept(observableResponse: Observable<Response>): Observable<Response> {
observableResponse.subscribe(response => this.handleResponseHeader(response.headers));
return observableResponse;
}
}
我beleive订阅的观察响应导致了问题。如果我们使用.subscribe的.map instad没有问题是可重现的,但没有得到想要的结果,例如标题值不是从响应返回的
在app.module.ts中,我们指定使用HttpService而不是Http (app。 module.ts)
.....
providers: [
......
{
provide: Http,
useFactory: (loggedInUserApi: service.LoggedInUserApi, xhrBackend: XHRBackend, requestOptions: RequestOptions) =>
new service.HttpService(loggedInUserApi, xhrBackend, requestOptions),
deps: [service.LoggedInUserApi, XHRBackend, RequestOptions]
}
],
....
在服务中,我们使用POST方法来添加用户调用服务器API。此API调用是2次,这是问题。它应该只触发一次。 (用户operation.service.ts)
public addUser(body: models.User, extraHttpRequestParams?: any): Observable<models.User> {
// verify required parameter 'body' is not null or undefined
if (body === null || body === undefined) {
throw new Error('Required parameter body was null or undefined when calling addUser.');
}
const path = this.basePath + '/user';
let queryParameters = new URLSearchParams();
let headerParams = new Headers({ 'Content-Type': 'application/json' });
let requestOptions: RequestOptionsArgs = {
method: 'POST',
headers: headerParams,
search: queryParameters
};
requestOptions.body = JSON.stringify(body);
return this.http.request(path, requestOptions)
.map((response: Response) => {
if (response.status === 204) {
return undefined;
} else {
return response.json();
}
}).share();
}
在用户组件,我们称之为使用按钮点击事件服务,并通过用户模型。 (User.component.ts)
addUser(event) {
// To add user using api
this.busy = this.api.addUser(this.user)
.subscribe(
() => {
DialogService.displayStatusMessage({ message: 'User configurations saved successfully.', type: 'success' });
this.router.navigate(['users']);
},
(error: any) => {
throw ({ message: error.json().message });
}
);
}
我看过类似的问题在那里解释了有关冷热观测,我们应该用.share使obsevable热,以避免这个问题。我试过了,没有运气。
答
您的intercept
方法订阅observable并返回它。消费代码正在订阅相同的确切观察值。
当涉及到Http相关的可观察事件时,两个订阅意味着两个API调用。
intercept(observableResponse: Observable<Response>): Observable<Response> {
observableResponse
.subscribe(response => // <-- pretty bad!
this.handleResponseHeader(response.headers)
);
return observableResponse;
}
你想要做的是使用.do()
操作它用于副作用。此运算符不会修改Observable类型或事件值,只是“解开”它,对值执行一些操作,并将事件向下传递。
intercept(observableResponse: Observable<Response>): Observable<Response> {
return observableResponse
.do(response => this.handleResponseHeader(response.headers));
}
谢谢伊戈尔索洛伊登科的回复。 'do'解决了问题,但handleResponseHeader(response.headers)函数从未触发。同样的行为也注意到了.map也注意到多个api调用没有被注意到,但是handleResponseHeader函数从未触发过。 –
你有一个掠夺者作为repro吗?这两个&地图应该工作。您应该不惜一切代价避免双倍订阅。 –
对不起,我的坏!有效。十分感谢。问题是我在返回之前正在应用这个做法。 –