Angular2 http获取返回字符串的问题答案

【问题标题】：Angular2 http get issue returning a stringAngular2 http获取返回字符串的问题
【发布时间】：2017-10-11 03:59:22
【问题描述】：

我有一个简单的 Flask 应用程序正在运行，它返回一个字符串

我的 Angular2 代码是根据我在网上看到的各种教程拼凑而成的 webservices.services.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import {HttpModule} from '@angular/http';
import {JsonpModule} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class WebService {
  constructor(private http: Http, private router: Router,private _jsonp: JsonpModule) { }

 public getDataFromBackend() {//
    return this.http.get('http://localhost:5000/getstuff')
    .map(data=>{
        data.json();
        console.log(data.json());
        return data.json();
    })
  }
}

App.Component.ts

import { Component , OnInit} from '@angular/core';
import { WebService } from './webservices/webservices.services';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';
import {HttpModule} from '@angular/http';
import { RouterModule } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [WebService]
})
export class AppComponent implements OnInit {

  constructor(private http: Http,  private webservice: WebService, private router: Router) { }
  title: string = 'My first angular2-google-maps project';
  lat: number = 45.478418;
  lng: number = -122.209007;
  msgBackend: string = "";
  public ngOnInit(){

  }
 public getData(){
    this.webservice.getDataFromBackend()
      .subscribe(
      (data) => this.handleData(data),

      () => console.log('Write to console output')

      );
  }

    private handleData(data: Response) {
    if (data.status === 200) {
      let receivedData = data.json();
      console.log(receivedData);
      this.msgBackend= receivedData;
      return this.msgBackend;
    }


  }





}

因此，当我的应用程序运行时，它会点击 Flask 应用程序并返回 200。此外，控制台确实会写入“写入控制台输出”。我也尝试添加一个可观察的 Observable，但没有奏效。我想我只是没有掌握 Angular2 http 和异步的东西。

编辑：console.log(receivedData); 为什么不去控制台？

【问题讨论】：

有什么问题？你从来没有提到过。
console.log(receivedData);为什么不去控制台？

标签： angular get xmlhttprequest angular2-services

【解决方案1】：

如前所述，由于这不是 JSON，而是字符串，请改用 response.text()，如下所示：

public getDataFromBackend() {
  return this.http.get('http://localhost:5000/getstuff')
   .map(response => response.text())
}

在组件中：

public getData(){
  this.webservice.getDataFromBackend()
    .subscribe(data => {
       this.handleData(data),
  });
}

在您的handleData 中，我们不再处理Response，但此时数据只是一个字符串：

private handleData(data: string) {
  console.log(data);
  this.msgBackend= data;
}

【讨论】：

获取“对象”类型上不存在“属性”文本
对我来说，它与 responseType: 'text' 一起工作（见我的回答）

【解决方案2】：

投票最多的答案对我不起作用，遗憾的是，角度手册中建议的答案需要@ts-ignore，但仍然可以正常工作。

// @ts-ignore
return this.http.get<string>('my-api-url', {responseType: 'text'});

来自https://angular.io/guide/http#requesting-a-typed-response：

// this works 
 client.get('/foo', {responseType: 'text'})

【讨论】：

【解决方案3】：

如果您返回的是文本而不是实际的 json，请使用 response.text()

将您的 getDataFromBackend 更新为此，返回文本，而不是响应。

public getDataFromBackend() {
    return this.http.get('http://localhost:5000/getstuff')
    .map(response =>{
        response.json();
        return response.body;
    })
  }

然后将handleData 更新为：

private handleData(data: any) {
    console.log(data);
    this.msgBackend= data;
}

【讨论】：

嗯...无论 intellisense 的 Visual Studio Code 等价是什么都不喜欢 response.Body。

【解决方案4】：

我自己也遇到了这个问题。根据观察到的行为，httpclient 需要一个 Json 对象，而不是一个简单的字符串。当我返回简单字符串时，我看到了一个解析错误。

我使用的解决方案是将后端的结果包装成一个Json对象

    return this.http.get(url, {headers:header}).pipe(
        map(this.handleGetResponse),
        catchError(this.handleResponseError));

    private handleGetResponse(res: any): string {
    var returnValue: string = res.result;
    return returnValue;
    }

【讨论】：