Angular HttpClient responseType和observe的坑人行为

现在是凌晨2点半。

我从晚上8点就遇到这个问题了，一直想不通，直到刚才查到https://github.com/angular/angular/issues/18586才发现被坑了一回。

问题是这样的，使用Angular的HttpClient发出get请求。文档规定的get方法有2个参数，一个是URL字符串，另外一个是options。在options中可以指定headers、observe、params、reportProgress、responseType、withCredentials。

很自然地就会想到如下方式：把options单独提出来定义

    const uri = `${this.config.uri}/${this.domain}`;const httpOptions = {headers: this.headers,responseType: 'json',params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, httpOptions);

可以指定后台返回的数据格式（responseType），比如json格式，text格式，还有blob格式及arraybuffer格式。

如上这种方式看起来是很正常的操作，不过烦人的是tslint报了一个error：

类型“{ headers: HttpHeaders; responseType: string; params: HttpParams; }”的参数不能赋给类型“{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }”的参数。
属性“responseType”的类型不兼容。
不能将类型“string”分配给类型“"json"”。 [2345]

很奇怪对不对？我也很奇怪，明明是正常操作，为什么会报error呢？get方法是支持把responseType设置成json的啊。

百思不得其解，点击get进入angular的代码，显示：

    get(url: string, options: {headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType: 'arraybuffer';withCredentials?: boolean;}): Observable<ArrayBuffer>;

这个更奇怪了，我明明定义的是json，为什么angular的get方法重载（get方法有15种重载）到arraybuffer呢？观察了好久猜测导航到的重载正好是15种重载中的第一个，是不是ts不能识别这个时候的重载规则所以默认导航到第一个重载了？

按照这个思路想下去，为什么ts不能识别这个时候的重载规则呢？是不是这个时候ts不知道httpOptions 的数据类型啊？

抱着试一试的态度（其实也不抱希望，毕竟连js都有类型推导，更何况ts呢），我给httpOptions 加了数据类型：

    const uri = `${this.config.uri}/${this.domain}`;
    const httpOptions: {
      headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType: 'json';withCredentials?: boolean;} = {headers: this.headers,responseType: 'json',params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, httpOptions);

httpOptions 的数据类型就是直接copy Angular的码源定义的，竟然不报Error了。。。。

结合之前报错的信息“{ headers: HttpHeaders; responseType: string; params: HttpParams; }”，就可以发现：

如果没有给出数据类型，ts会根据规则推导出responseType的数据类型是string，但是get方法的15种重载中，responseType的数据类型是"json" | "text" | "blob" | "arraybuffer"。

string类型显然不是"json" | "text" | "blob" | "arraybuffer"其中的一个，所以报了一个error，那是不是不做类型推导就可以了？为了验证这个猜想，我做了如下测试：

    const httpOptions: Object = {headers: this.headers,responseType: 'json',params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, httpOptions);

这样是可以的，考虑一下，数据类型为Object时，就不会再进行类型推导，也就不会报error了。

如果单独把responseType的赋值不提出了呢？

    const uri = `${this.config.uri}/${this.domain}`;const httpOptions = {headers: this.headers,params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, {...httpOptions, responseType: 'json'});

这样同样也是可以的。所以结论就是：要么给ts正确的推导，要么不要让ts进行推导。

现在再记录一下上面提到的文章：

观点1：

const res = this.http.get(url, {responseType: 'text'});与

const options = {responseType: 'text'}; const res = this.http.get(url, options);是不同的，这是类型推导引起的，对于1：ts不会进行类型推导，对于2：ts把options类型推导为{responseType: string}，这就造成了错误。

观点2：

　可以用下面的方法让ts有正确的推导：

    const uri = `${this.config.uri}/${this.domain}`;const httpOptions = {headers: this.headers,responseType: 'json' as 'json',params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, httpOptions);

　　这样推导出来的就是{responseType: 'json'}，就可以正常显示了。

观点3：

　当然，github上的各位小哥心中都有一个mmp，这个明明是Angular的bug，为什么从4.3版本更新到如今的7.1版本还是没有修改过来？

　为了抗议，有个小哥提出如下方法：

// define this namespace somewhere
export namespace ResponseType {export const JSON = 'json' as 'json';export const ArrayBuffer = 'arraybuffer' as 'arraybuffer';export const Blob = 'blob' as 'blob';export const Text = 'text' as 'text';
}

// import the namespace above and use it like this
const reqOpts = {params: params,headers: headers,responseType: ResponseType.JSON,
};// no type error, the right signature is selected
const a = await this.http.get(url, reqOpts);
const b = await this.http.get<MyClass>(url, reqOpts);

我尝试了一下，是可以用的。如果只是写成这样，那也不足为奇，小哥本着反正是开源软件，就修改一下源代码吧，Angular的开发人员不修改bug，他就自己修改了。

You would need to first put the following in the declaration @angular/common/http/src/client.d.ts:
declare module '@angular/common/http' {export namespace HttpResponseType {export const JSON: 'json';export const ArrayBuffer: 'arraybuffer';export const Blob: 'blob';export const Text: 'text';}export declare type HttpObserve = 'body' | 'events' | 'response';export namespace HttpObserve {export const Body: 'body';export const Events: 'events';export const Response: 'response';}
}

Then implement it in angular/packages/common/http/src/:
export namespace HttpResponseType {export const JSON: 'json' = 'json';export const ArrayBuffer: 'arraybuffer' = 'arraybuffer';export const Blob: 'blob' = 'blob';export const Text: 'text' = 'text';
}export type HttpObserve = 'body' | 'events' | 'response';
export namespace HttpObserve {export const Body: 'body' = 'body';export const Events: 'events' = 'events';export const Response: 'response' = 'response';
}

Finally the two namespaces should be properly exported all the way back to @angular/common/http.

我也尝试了一下，也是可以的，但是还是不建议这样修改啊，毕竟没有经过严格的单元测试，不知道会不会影响全局的代码啊。

总结一下：既然官方没有修改，开发者就要一直打补丁，建议使用如下的方式：

1：

    // 加数据类型const uri = `${this.config.uri}/${this.domain}`;
    const httpOptions: {headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType: 'json';withCredentials?: boolean;} = {headers: this.headers,responseType: 'json',params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, httpOptions);

2：

    // 把特殊的responseType和observe不要提出来const uri = `${this.config.uri}/${this.domain}`;const httpOptions = {headers: this.headers,params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, {...httpOptions, responseType: 'json'});

3：

// 强制正确类型推导    const uri = `${this.config.uri}/${this.domain}`;const httpOptions = {headers: this.headers,responseType: 'json' as 'json',params: (new HttpParams()).set('members_like', userId),};return this.http.get<Project[]>(uri, httpOptions);

4：企业级开发中为了大家使用的方便，建议把类型单独提取出来

 1 // httpOptions的observe，参见https://www.cnblogs.com/wangtingnoblog/p/10322483.html
 2 export namespace ObserveType {
 3   export const Body = 'body' as 'body';
 4   export const Response = 'response' as 'response';
 5   export const Events = 'events' as 'events';
 6 }
 7 // httpOptions的responseType，参见https://www.cnblogs.com/wangtingnoblog/p/10322483.html
 8 export namespace ResponseType {
 9   export const Json = 'json' as 'json';
10   export const Text = 'text' as 'text';
11   export const Blob = 'blob' as 'blob';
12   export const Arraybuffer = 'arraybuffer' as 'arraybuffer';
13 }

使用：

1     const httpOptions = {
2         headers: this.headers,
3         // 如何设置observe和responseType参见https://www.cnblogs.com/wangtingnoblog/p/10322483.html
4         observe: ObserveType.Response,
5         responseType: ResponseType.Json,
6         // 查询参数，会被解析成?members_like=1，可以给HttpParams传递参数HttpParamsOptions（支持数组，查询字符串），
7         // HttpParams是不可修改的，只能通过set返回新的HttpParams
8         params: (new HttpParams()).set('members_like', userId),
9     };

注意第4行第5行

Over

修改： 2019-02-16 17:34:05

转载于:https://www.cnblogs.com/wangtingnoblog/p/10322483.html

Angular HttpClient responseType和observe的坑人行为相关推荐

Angular4 Angular HttpClient
安装首先,我们需要更新所有的包到 4.3.0-rc.0 版本.然后,我们需要在 AppModule 中导入 HttpClientModule 模块.具体如下: import { HttpClient ...
angular HttpClient post put patch del 方法（2）-Promise 服务
之前做了在一个页面的CRUD的方法,现实中webapi模块往往是单独写服务的,所以修改了一下原来的设计和结构,还是需要很多知识的. 2017.11.15增加patch方法 ,改进服务程序优化写法 20 ...
angular HttpClient 配置
angular的资料很少,并且坑很多,报错也不是很好解决,研究这个花了好几天时间. 首先,先查看自己的anuglar版本是不是4.3.0以上,HttpClient是anuglar4.3中新加入的特性, ...
Angular HTTPClient的使用方法
这个例子演示了如何使用Angular的HttpClientModule. 在app.module.ts里导入HttpClientModule: import { HttpClientModule } ...
Angular HttpClient.get的实现单步调试
进入get方法: request方法实现的源代码: @Injectable() export class HttpClient {constructor(private handler: HttpHa ...
解决Angular HttpClient设置headers后，Body体格式问题
Angular headers默认的Content-Type为 multipart/form-data; boundary=----WebKitFormBoundaryTyqm71FGjlNaJxbE ...
angular HttpClient getbyid 方法获取数据
简单传参的方法,最常用的是getbyid 方法. 直接上代码: getbyId(id: string) {this.myhttp.get('http://192.168.2.139:9002/api/ ...
angular 模块构建_如何通过11个简单的步骤从头开始构建Angular 8应用
angular 模块构建 Angular is one of the three most popular frameworks for front-end development, alongsid ...
Angular导出功能（excel导出功能、文件数据流导出功能、图片的下载导出功能）
Angular导出功能(excel导出功能.文件数据流导出功能.图片的下载导出功能) 场景1:(直接返回网络地址进行导出的excel) 后台返回的是 : "http://192.168.0. ...

Angular HttpClient responseType和observe的坑人行为

Angular HttpClient responseType和observe的坑人行为相关推荐

最新文章

热门文章