拦截http响应时请求被发送两次

Question

它发现当我们拦截HTTP响应并使用subscribe获取Observable响应中的值时，会触发2次请求。下面是代码

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热，以避免这个问题。我试过了，没有运气。

Answer 1

您的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)); 
}