HttpParams 为调用设置 null

Question

在将我的项目从 Angular 7 迁移到 Angular 8 后，我遇到了 HttpParams 和 HttpHeaders 的问题。当我调用 API 时，没有添加参数。如果有人能帮我解决这个问题，那就太好了。

这是我定义标题和参数的方法。

fetchJson(url: string, parameters ? : any) {
    this.token = this.cookieService.get('access_token');
    this.contrat_token = this.cookieService.get('contrat_token');

    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', 'Bearer ' + this.token);
    headers = headers.append('contrat_token', this.contrat_token);

    let params = new HttpParams()
    params.set('search', parameters);
    console.log('les headers');
    console.log(headers);
    console.log('params');
    console.log(params.toString())

    return this._http.get(url, {
        headers,
        params
      }).pipe(map((resp: any) => {
            if (resp.status === 401 || resp.status == 401 || resp.status.toString() == "401") {
              this.clearCookie();
            } else {
              let reponse = resp;

              if (reponse == -1 || reponse == "-1") {
                this.router.navigate(["/"]);
              }
            }

            return resp;
          }

我在我的服务中调用这个方法如下。

   getDetailThematiquePrevNext(id: string, typeBase: string) {
        let URL = this.urlDecorator.urlAPIDecorate("DI", "GetDetailThematiqueHeaderPrevNext");
        let params = this.urlDecorator.generateParameters({
            id: id,
            typeBase: typeBase,
          
        });
        return this.apiFetcher.fetchJson(URL, params);
    }

Answer 1

Cue 提供的理由是正确的，您需要使用链接或执行您对标头所做的操作

let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/json');
headers = headers.append('Authorization', 'Bearer ' + this.token);
headers = headers.append('contrat_token', this.contrat_token);

let params = new HttpParams()
params = params = params.set('search', parameters);

更易读的写法如下

const headers = new HttpHeaders()
    .append('Content-Type', 'application/json')
    .append('Authorization', 'Bearer ' + this.token)
    .append('contrat_token', this.contrat_token);

const params = new HttpParams().set('search', parameters);

此外，您可以删除 Content-Type 标头，因为它默认为 json

Answer 2

可能是由于惰性解析。您必须执行 get 或 getAll 才能访问值以确定状态。

HttpParams 类表示序列化参数，根据 MIME 类型 application/x-www-form-urlencoded。 类是不可变的，所有的变异操作都会返回一个新的实例。

HttpHeaders 类表示 HTTP 请求的标头配置选项。应假定实例通过延迟解析不可变。

您可能希望将选项直接传递到标头和参数的实例中：

let headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.token,
  'contrat_token': this.contrat_token
});

let params = new HttpParams({
  search: parameters
});

正如@Siraj 在回答中所说，有其他方法可以设置标题和参数的值，例如set...

let headers = new HttpHeaders().set('name', 'value');
let params = new HttpParams().set('name', 'value');

或者append...

let headers = new HttpHeaders().append('name', 'value');
let params = new HttpParams().append('name', 'value');

这里要注意的重要一点是这些方法需要链接，否则每个方法都会创建一个新实例。

你也可以像这样转换对象：

let headerOptions = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.token,
  'contrat_token': this.contrat_token
}

let headers = new HttpHeaders();

Object.keys(headerOptions).forEach((key) => {
  headers = headers.set(key, headerOptions[key]);
});

还值得避免通过引用绑定任何对象，而是作为参数传递：

return this._http.get(url, {
  headers: headers,
  params: params
});

最后，因为参数参数的类型注释是“任何”，params 需要 HttpParamsOptions 这是一个键/值对象，其中值必须是字符串注释。

let params = new HttpParams({
  search: JSON.stringify(parameters)
});

尝试console.log(params.getAll('search'))，但为了确保发送标头和参数，更好的检查位置是 DevTools 中的“网络”选项卡。