如何在 Angular 4.3+ 中全局设置 { 观察：'response' } 选项？

Question

第一个想法是使用HttpInterceptor但clone(...)方法的签名不包含observe选项。除了为每个请求定义{ observe: 'response' }选项外，我还没有看到替代方案......

那么，是否有(如果有(全局设置{ observe: 'response' }选项的方法，例如通过HttpInterceptor？

clone(update: {
   headers?: HttpHeaders;
   reportProgress?: boolean;
   params?: HttpParams;
   responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
   withCredentials?: boolean;
   body?: T | null;
   method?: string;
   url?: string;
   setHeaders?: {
       [name: string]: string | string[];
   };
   setParams?: {
       [param: string]: string;
   };
}): HttpRequest<T>;

Answer 1

拦截

器最适合用于设置所有请求的标头，例如Authorization标头。但是，对于全局选项，您可以创建一个包装器方法，而不是 HttpClient 的 get() 方法：

constructor(private http: HttpClient) {}
get<T>(url: string, params?: { [param: string]: string }): Observable<HttpResponse<T>> {
    return this.http.get<T>(url, {
      params: new HttpParams({ fromObject: params }),
      observe: 'response',
    });
  }

这可以在您的服务中使用，或者您可以创建一个单独的自定义 http 服务来包装每个方法 - 发布、修补、删除等。

Answer 2

我知道

这个问题很老，但很有趣。

我想到了重写的httpClient Methods。

您只需要覆盖这些方法一次。所有的工作都将完成。

例如，对于 GET 方法，如下所示：

  overrideGetRequest() {
    const httpRequest = this.http.get.bind(this.http);
    this.http.get = function get<T = any>(url: string, options?: any): Observable<T> {
      let requestOptions = options || {};
      if(!('observe' in requestOptions)) {
      requestOptions = { ...requestOptions, observe: "response" };
      }
      return httpRequest(url, requestOptions);
    };
  }

这是 Stackblitz 的例子，我覆盖了 httpClient 的 POST 和 GET 方法。

https://stackblitz.com/edit/angular-interceptors-kknew1?file=app%2Fapp.component.ts

Answer 3

您可以在克隆请求时通过setParams添加{ observe: 'response' }，如下所示：

request.clone(
    {
      setParams: { observe: 'response' },
      setHeaders: { 'some': 'header' },
      url: 'some.url'
    }
  );

。setHeaders和url在这里是可选的。