javascript - 从 Angular 4 HTTP 调用获取完整响应(不仅仅是正文)

标签 javascript angular typescript

我正在尝试从我的 HTTP 调用中获得完整的响应。根据 Angular 文档,我应该将我的 HTTP 调用 “选项” 设置为 {observe: 'response'}

如果我这样做,我会收到以下错误:

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'Observable<IItem[]>'. Type 'HttpResponse<IItem[]>' is not assignable to type 'IItem[]'. Property 'includes' is missing in type 'HttpResponse<IItem[]>'.

我认为我对ObservablesTyping/Casting 的概念不是那么清楚。

我有一个 HTTP Get 请求返回一个 observable 并将其强类型化到一个项目数组中(见下文)

getItems(): Observable <IItem[]>{
    return this._http.get<IItem[]>(url, {observe: 'response'})
    .do(data => console.log('All: ' + JSON.stringify(data)))
};

我尝试设置 getUsers(): Observable <HttpResponse<IUser[]>>这解决了上述错误,但在我的 subscribe 内当我尝试将返回的数据分配给局部变量时出现以下错误 this.item = data;其中 item声明为 item: Item[]

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'IItem[]

所以我的问题是:

  1. 如何解决上述错误(以及为什么会出现此错误)?
  2. 这可能是个愚蠢的问题,但如果._http.get<IItem[]>已经设置了预期的响应“类型”,我还需要设置 getItems(): Observable <IItem[]> 吗?方法返回类型?

我认为我不理解导致这种混淆的一些基本概念。任何帮助将不胜感激。我是 Angular 4 的新手,所以请保持温和。

最佳答案

HttpClient.get方法被定义为使用泛型类型 T :

get<T>(url: string, options?: {
    ...
}): Observable<T>;

既然你通过了<IItem[]>get方法在这里 this._http.get<IItem[]>根据定义 get方法返回 HttpResponse<IItem[]>目的。但是你声明你的方法getItems返回 IItem[]因此你会得到错误:

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'Observable<IItem[]>'.

要修复它,您需要返回 IItem[] .这可以通过提取类型为 IItem[] 的正文来完成。来自 HttpResponse<IItem[]>并归还它。 do运算符(operator)不能返回任何东西,所以你必须使用 map运营商:

this._http.get<IItem[]>('url', {observe: 'response'})
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .map(data => data.body)

关于javascript - 从 Angular 4 HTTP 调用获取完整响应(不仅仅是正文),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46955038/

相关文章:

typescript - 如何在vue + Typescript类组件中使用mapActions?

javascript - 如何在 Angular 2 中映射和绑定(bind)数据?

angular - 如何为 Angular Component 中的 ActionsSubject 订阅编写单元测试

javascript - Angular 6 服务和类继承

javascript - Windows Library for Javascript 的 WriteableBitmap 等效项

javascript - ES6从变量解构

angular - 缓冲 Angular 服务 HttpClient 请求

node.js - 使用 ng 服务器 Angular 6 运行脚本

javascript - Webpack 2 ES6 导入 UMD 无默认导出

javascript - 无法读取 ARRAY Javascript 中未定义的属性 '0'