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&lt;string&gt; 不可分配给类型“字符串”。

我错过了什么?

编辑: 我已删除正在打印的自定义错误消息

“找不到图片”

使用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&lt;string&gt; 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的代码的主要区别在于响应协商是使用observeresponseType选项执行的,.map((res) =&gt; res.text())行应该省略。

方法 1 使用这里不需要的 observe: 'response',但没有设置默认为 jsonresponseType 并导致 JSON 解析错误。 方法 2 使用 Http API,而 httpHttpClient

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

Angular 4 HttpClient 查询参数

Binance API 和 Angular 4 httpClient

Angular 4 错误:没有 HttpClient 的提供者

Angular 4.3.3 HttpClient:如何从响应的标头中获取值?

如何使用HttpClient访问响应头? [重复]