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

可能是由于延迟解析。您必须执行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
});

最后，由于您的参数参数的类型注释为“ any”，因此params期望HttpParamsOptions是键/值对象，其中值必须为字符串注释。

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

尝试使用console.log(params.getAll('search'))，但是要确保发送了标头和参数，最好在DevTools中的“网络”标签中进行检查。

Answer 2

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

HttpParams将null设置为call

2 个答案: