Angular2 http获取问题返回一个字符串

Question

我有一个简单的Flask app运行,它返回一个字符串

我的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); 为什么不去控制台？

Answer 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;
}    

Answer 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'})

Answer 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;
}