从角度 5 中的 http 抛出错误移至 httpClient

Question

我正在尝试为 restservice 创建新的包装器，我正在尝试将 angular 4 移动到 5 并升级相同的服务。我收到如下错误。如果我将Observable<Response> 更改为Observable<HttpResponse> 也会出现错误：

“HttpHeaders”类型的参数不能分配给“{ headers?: HttpHeaders | { [标题：字符串]：字符串 |细绳[]; };观察？：“身体”；参数？：Ht...'。
属性 'headers' 在 'HttpHeaders' 类型中是私有的，但在 '{ headers 类型中不是私有的？：HttpHeaders | { [标题：字符串]：字符串 |细绳[]; };观察？：“身体”；参数？：

下面是代码。

import { Injectable } from '@angular/core';    
import { Observable } from 'rxjs/Observable';    
import { HttpClient, HttpRequest, HttpHeaders, HttpResponse } from '@angular/common/http';

@Injectable()
export class httpService {
    private requestHeaders: HttpHeaders;

    constructor(private _http: HttpClient) {
        this.requestHeaders = new HttpHeaders();
        this.requestHeaders.append('Content-Type', 'application/json');
        this.requestHeaders.append('Accept', 'application/json');
    }

    post(url: string, requestData?: any): Observable<Response> {
        return this._http.post(url, requestData, this.requestHeaders);
    }
}

---

上面是通过使用{headers: this.requestHeaders}修复的

但是return this._http.post(url, requestData, this.requestHeaders); 行会抛出类似的错误

Type 'Observable<ArrayBuffer>' is not assignable to type 'Observable<Response>'.
Type 'ArrayBuffer' is not assignable to type 'Response'.
Property 'body' is missing in type 'ArrayBuffer'.

Answer 1

headers 只是选项的一个参数，所以你应该传入

{headers: this.requestHeaders}

这也将修复您看到的Property 'headers' is private... 错误。

---

另外，HttpHeaders 是不可变的。所以每个变异算子都会返回一个新的实例。这意味着正确设置您需要做的标题

this.requestHeaders = new HttpHeaders()
    .append('Content-Type', 'application/json')
    .append('Accept', 'application/json');

或

this.requestHeaders = new HttpHeaders();
this.requestHeaders = this.requestHeaders.append('Content-Type', 'application/json');
this.requestHeaders = this.requestHeaders.append('Accept', 'application/json');

---

更新：

所以 post observable 返回类型为 Observable<ArrayBuffer> 但您的方法被声明为返回类型 Observable<Response> 导致类型不匹配。 HttpClient 期望您将返回类型传递给方法this.http.post<YourResponseType>(...)（或者它将假定返回类型）。所以你的方法应该更新为

post<T>(url: string, requestData?: any): Observable<T> {
    return this.http.post<T>(url, requestData, {headers: this.requestHeaders});
}

其中T 是响应类型。现在 http 方法期望返回类型 Observable<T> 而您的 post 方法返回类型 Observable<T>。类型匹配。你会像这样使用你的方法

this.post<MyResponse>(myUrl, myRequestData).subscribe(...);

Answer 2

append()的实现是：

append(name: string, value: string|string[]): HttpHeaders { 
   return this.clone({name, value, op: 'a'}); 
 } 

它返回一个 hte headers 对象的克隆。您需要将返回的结果存储/分配给您的变量this.reqequestHeaders，否则它不会被保存。

或者，构造函数os HttpHeaders是：

constructor(headers?: string|{[name: string]: string | string[]})

更简洁的方法是：

const headerJson = {
  'Content-Type': 'application/json',
  'Accept' : 'application/json'
}

this.header = new HttpHeaders(headerJson);