Question

我正在尝试使用Angular 2中的Http执行一个简单的GET请求，跟随此TUTORIAL以及其他一些更新的资源。

成功注入http组件后，我编写了以下代码

 constructor(@Inject(Http) /* remove @Inject once @Injectable works */ public http:Http){
        http.get('https://api.travis-ci.org/config').toPromise().then((response => console.log(response.json().data) )
        //     .map(res => res.text())
        //     .subscribe(
        //     data => console.log(data),
        //     err => console.error(err),
        //     () => console.log('Random Quote Complete')
        // );
    }

正如您所看到的，我已经尝试了几种组合，因此有很多评论。我收到这些错误

http.get（...）。map不是函数（...）

如果我尝试使用地图

在预检响应中，Access-Control-Allow-Header不允许使用请求标头字段X-XSRF-TOKEN。

其他任何东西..（toPromise）例如。

我怎样才能让它发挥作用？

如果我使用fetch，则调用有效..所以它必须是有角度的东西。

Answer 1

没有方法map（）与＆＃39; Promise＆＃39;相关联。查看链接Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

我解决了你的问题。在这里，我使用了观察者/订阅者模式。您只需检查以下代码：

<强> rxjs-operators.ts

<?php
preg_match('/(\d+(?:\.\d+)?)[MKG]B/', '">blablabla</a> </td>blablabla "> 8.8GB </a> </td>', $match);
echo $match[1];

<强>特拉维斯-service.ts

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

您可以使用以下代码订阅数据。

<强> travis.component.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import './rxjs-operators';

@Injectable()
export class TravisService {
  constructor (private http: Http) {}

  getData (): Observable<any> {
    return this.http.get('https://api.travis-ci.org/config')
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server   error';
    return Observable.throw(errMsg);
  }
}

Answer 2

你可以尝试

export class NoXSRFStrategy implements XSRFStrategy {
  configureRequest(req: Request) {}
}

@NgModel({
  providers: [{provide XSRFStrategy, useClass: NoXsrfStrategy}],
  ...
})

你不应该在生产中使用它。特拉维斯似乎错过了Access-Control-Allow-Headers "X-XSRF-TOKEN"

无法让angular2中的`http.get`工作

2 个答案: