angular4:无法使用 httpclient get 获取响应字符串
Posted
技术标签:
【中文标题】angular4:无法使用 httpclient get 获取响应字符串【英文标题】:angular4: unable to obtain response string using httpclient get 【发布时间】:2018-08-03 05:42:37 【问题描述】:我的后端 API http://localhost:8300/api/picture
返回一个字符串,我尝试了以下方法:
(getpicture
在按钮点击时被调用)
方法一:
import Component, OnInit from '@angular/core';
import HttpClient from '@angular/common/http';
@Component(
selector: 'app-auth-success',
templateUrl: './auth-success.component.html',
styleUrls: ['./auth-success.component.scss']
)
export class AuthSuccessComponent implements OnInit
showImg: boolean = false;
imgUrl: string = "";
constructor(private http: HttpClient)
ngOnInit()
getPicture()
this.http.get("http://localhost:8300/api/picture", observe: 'response' )
.subscribe(
res =>
console.log(res);
this.onSuccess(res);
, error =>
console.error("Some error while calling backed");
);
onSuccess(data: any)
this.imgUrl = data;
this.showImg = true;
还有 HTML:
<div>
<button (click)="getPicture()">Google Picture</button><br><hr><hr>
<img [src]="imgUrl" *ngIf="showImg">
</div>
输出:
发现“调用支持时出现一些错误”(即打印错误)
方法2:
getPicture()
this.http.get("http://localhost:8300/api/picture")
.map((res : Response)=>
console.log(res); // correct value printed if below line is commented
this.imgUrl = res.text(); // compiler gives error at this line
)
.subscribe();
输出: 我得到编译器错误:
类型 Promise
<string>
不可分配给类型“字符串”。
我错过了什么?
编辑: 我已删除正在打印的自定义错误消息
“找不到图片”
使用console.error(error)
,因为它造成了我的后端返回此错误的混乱。
打印的错误信息是:
e headers: t, status: 200, statusText: "OK", url: “http://localhost:8300/api/picture”,正常:假,... 错误:错误: SyntaxError:JSON.parse 中位置 0 处的 JSON 中的意外标记 h () 在 XMLHttp...,文本: "https://lh3.googleusercontent.com/-46Nb-WbneSU/AAAAAAAAAAI/AAAAAAAAAAc/V7Pz0b9mxdw/photo.jpg" 标头:t normalizedNames:Map(0),lazyUpdate:null,lazyInit:ƒ 消息:“解析期间的 Http 失败 http://localhost:8300/api/picture" 名称:"HttpErrorResponse" 确定: 错误状态:200 statusText:“OK”网址: "http://localhost:8300/api/picture"
【问题讨论】:
您可以在此处粘贴来自 API 的示例响应吗? @theLearner, "map" 用于转换响应,而不是调用函数(你可以使用 "do")。您在“订阅”中得到响应,因此您的第一种方法是正确的。确定你用的是HttpClient,试试写console.log(error)看看报错 @Eliseo 关于错误消息的任何想法:Type Promise<string> is not assignable to type 'string'.
【参考方案1】:
正如this answer 中所解释的,Http
受 Fetch API 的启发并具有相同名称的类,但它们不兼容,因为 Http
使用 observables,而 Fetch API 使用 Promise。
这意味着如果没有导入Response
,则将使用全局Response
。由于Response
在此处仅用作类型,因此该问题仅影响类型。应该有:
import Response from '@angular/http';
这不适用于HttpClient
。使用HttpClient
的代码的主要区别在于响应协商是使用observe
和responseType
选项执行的,.map((res) => res.text())
行应该省略。
方法 1 使用这里不需要的 observe: 'response'
,但没有设置默认为 json
的 responseType
并导致 JSON 解析错误。
方法 2 使用 Http
API,而 http
是 HttpClient
。
map
不适合产生副作用。 Dummy subscribe()
表示此处滥用了 observable。如果使用 observables 没有任何好处,promise 可能是更方便的选择:
async getPicture()
try
this.imgUrl = await this.httpClient.get("http://localhost:8300/api/picture", responseType: 'text' )
.toPromise();
this.showImg = true;
catch (e)
...
这与原始问题无关,Image not found
。后端 API 响应错误。这与 Angular 无关,应该根据后端进行修复。
【讨论】:
我在后端放了一个断点,后端总是返回正确的字符串,即在这两种方法中。同样正如我在问题中提到的那样,如果我使用 Approach 2 并打印响应,则后端返回的响应会被正确打印(当我尝试将其分配给我的局部变量时会出现错误)。Image not found
打印在 Approach 1 中,而 angular 正在打印它,因为在 console.error
我已经给出了该消息。
我已经更改了错误消息,因为它造成了混乱。
后端调试说什么并不重要。浏览器接收到什么很重要。您可以在开发工具网络选项卡中检查这一点。可能出现错误的原因可能有无数种,而您是唯一可以输出error
并检查错误的人。方法 1 将无法正常工作,因为没有 res.text(),但不会导致此错误。无论如何,这个问题涵盖了 Angular 代码有什么问题。其余的取决于您的后端。希望这会有所帮助。
请注意,答案假定您使用 Http。这就是问题中的代码所暗示的。对于 HttpClient 来说,这不是真的
这对我来说是一个非常愚蠢的错误。我正在使用HttpClient
。我应该发布完整的文件。现在编辑问题。以上是关于angular4:无法使用 httpclient get 获取响应字符串的主要内容,如果未能解决你的问题,请参考以下文章
angular4 httpclient csrf 不发送 x-xsrf-token
Binance API 和 Angular 4 httpClient
Angular 4 错误:没有 HttpClient 的提供者