Angular如何实现自定义HTTP POST方法并正确传递options参数

问题根源 #

你封装的postcall方法内部调用Angular原生post方法时的传参逻辑完全错误：

1. 你写的三元表达式options.Headers?Headers:responseType存在大小写错误，你定义的options属性是小写开头的headers，大写Headers不存在；
2. 表达式中用到的Headers、responseType都是未声明的变量，运行时自然报错；
3. 你没有将完整的options对象透传给原生post方法，只做了无意义的条件判断。

解决方案 #

直接将接收到的完整options对象作为第三个参数传给原生post方法即可，修正后的封装代码如下：

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

// 类内部的postcall方法
postcall(
  url: string, 
  body: any | null, 
  options: {
    headers?: HttpHeaders | {
      [header: string]: string | string[];
    };
    params?: HttpParams | {
      [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
    withCredentials?: boolean;
  } = {}
): Observable<any> {
  // 直接透传完整options，不需要额外判断
  return this.http.post<any>(url, body, options);
}

调用方式 #

你现有两种调用方式不需要做任何改动，修正封装逻辑后即可正常运行：

1. 直接传responseType的场景：

this.http.postcall(this.resumeapiserver, body, {responseType: 'text'});

2. 自定义请求头的场景：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}
this.http.postcall(this.apiServer + '/applicants/', JSON.stringify(applicant), httpOptions)

可选优化 #

你不需要手动编写options的类型定义，可以直接提取Angular原生post方法的参数类型，减少维护成本：

// 首先导入HttpClient类型
import { HttpClient } from '@angular/common/http';

// 提取原生post方法第三个参数的类型
type PostOptions = Parameters<HttpClient['post']>[2];

// 定义方法时直接使用该类型
postcall(url: string, body: any | null, options: PostOptions = {}): Observable<any> {
  return this.http.post<any>(url, body, options);
}

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