Angular 5中HTTP请求响应类型设置问题（Angular4迁移场景）

我来帮你搞定这个迁移中的响应类型设置问题，毕竟从Angular 4到5，Http模块的变化还是挺关键的，尤其是HttpClient取代了旧的Http（后者在Angular 5之后就逐步被废弃了）。下面分两种情况给你讲清楚怎么改：

情况1：已经迁移到Angular 5的HttpClient（推荐） #

HttpClient本身就内置了响应类型的处理，不用再手动调用response.json()这么麻烦了。你可以直接在请求的配置选项里指定responseType，可选值有'json'（默认）、'text'、'blob'、'arraybuffer'。

修改你的post方法如下：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// 假设你的commonHttpService是注入的HttpClient实例
public post = (
  data: any, 
  url = '', 
  headers: HttpHeaders | null = null, 
  mapToJson = false, 
  responseType: 'json' | 'text' | 'blob' | 'arraybuffer' = 'json'
): any => {
  // 组装请求配置项
  const requestOptions: any = {};
  if (headers) {
    requestOptions.headers = headers;
  }
  // 关键：设置响应类型
  requestOptions.responseType = responseType;

  // 发起请求
  let request$ = this.commonHttpService.post(url, data, requestOptions);

  // 兼容你原来的mapToJson逻辑（其实HttpClient默认会解析json，这个参数可以考虑逐步废弃）
  if (mapToJson && responseType !== 'json') {
    request$ = request$.pipe(
      map((response: any) => typeof response === 'string' ? JSON.parse(response) : response)
    );
  }

  // 保留你原来的extractData处理
  return request$.pipe(map(this.extractData));
};

使用示例 #

比如你要请求一个纯文本响应：

this.post(yourData, '/api/get-text', null, false, 'text').subscribe(text => {
  console.log('拿到的文本：', text);
});

如果是请求二进制文件（比如导出PDF）：

this.post(yourData, '/api/export-pdf', null, false, 'blob').subscribe(blob => {
  // 处理blob生成下载链接
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'report.pdf';
  link.click();
  window.URL.revokeObjectURL(downloadUrl);
});

情况2：暂时还在用Angular 4的旧Http模块 #

如果还没完全迁移到HttpClient，那得用旧的ResponseContentType来设置，步骤如下：

import { Http, Response, Headers, RequestOptions, ResponseContentType } from '@angular/http';

public post = (
  data: any, 
  url = '', 
  header: any = null, 
  mapToJson = false, 
  responseType: ResponseContentType = ResponseContentType.Json
): any => {
  // 组装请求选项
  let requestOptions: RequestOptions;
  if (header) {
    requestOptions = new RequestOptions({ 
      headers: header, 
      responseType: responseType 
    });
  } else {
    requestOptions = new RequestOptions({ responseType: responseType });
  }

  let request$ = this.commonHttpService.post(url, data, requestOptions);

  // 保留你原来的map逻辑
  if (mapToJson) {
    request$ = request$.map(this.extractData).map((response: Response) => response.json());
  } else {
    request$ = request$.map(this.extractData);
  }

  return request$;
};

小提示 #

Angular 5之后官方强烈推荐用HttpClient，它不仅简化了响应解析，还支持类型安全的响应、拦截器等新特性，建议你尽快完成这部分的迁移，后续维护会轻松很多。

内容的提问来源于stack exchange，提问作者Valla