Question

我试图使用Angular成功调用足球数据API。这是文档：http://www.football-data.org/documentation

使用文档中的示例代码，我已经设法使用jQuery返回JSON数据，如下所示：

$.ajax({
  headers: { 'X-Auth-Token': 'YOUR_API_TOKEN' },
  url: 'http://api.football-data.org/v1/fixtures?timeFrame=n1',
  dataType: 'json',
  type: 'GET',
}).done(function(response) {
  // do something with the response, e.g. isolate the id of a linked resource        
  var regex = /.*?(\d+)$/; // the ? makes the first part non-greedy
  var res = regex.exec(response.fixtures[0]._links.awayTeam.href);
  var teamId = res[1];
  console.log(teamId);
});

但是对于Angular来说相对较新，我不确定如何在该环境中做同样的事情。通过一些教程，我设置了一个service，使用HTTP到map从网址到JSON的响应，如下所示：

export class FootballService {
  private _url: string = "http://api.football-data.org/v1/competitions/426/leagueTable";
  constructor(private _http: Http) { }

  getLeagueTable(){
    return this._http.get(this._url)
            .map((res: Response) => res.json());
  }
}

我已将此服务导入我的组件，如下所示：

export class ApiComponent implements OnInit {
  table = [];
  constructor(private _footyService: FootballService) { }

  ngOnInit() {
    this._footyService.getLeagueTable()
      .subscribe(res => this.table = res);
  }

}

但是我的代码中明显存在我无法识别的问题，因为我没有通过此获得任何有效的JSON。如果有人可以帮助我，我会很感激。

Answer 1

您需要从服务提供商处获取“YOUR_API_TOKEN”并将其传递给标题

 headers: { 'X-Auth-Token': 'YOUR_API_TOKEN' }

像

this._http.get(this._url, 
   new RequestOptions({headers: {'X-Auth-Token': 'YOUR_API_TOKEN'}}));

Answer 2

看一下http客户端的角度教程。特别是headers部分：https://angular.io/docs/ts/latest/guide/server-communication.html#!#headers

您需要使用http服务，如下所示：

首先查看Http：https://v2.angular.io/docs/ts/latest/api/http/index/Http-class.html

的api

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

RequestOptionsArgs api：https://v2.angular.io/docs/ts/latest/api/http/index/RequestOptionsArgs-interface.html

interface RequestOptionsArgs {
  url : string
  method : string|RequestMethod
  search : string|URLSearchParams
  headers : Headers
  body : any
  withCredentials : boolean
  responseType : ResponseContentType
}

所以你可以使用：

    let headers = new Headers({ 'X-Auth-Token': 'YOUR_API_TOKEN' });
    let options = new RequestOptions({ headers: headers });
    this.http.get('URL HERE', options).subscribe(...)

Answer 3

深入研究 01-08-2019解决方案：

进口：

import {Http,Headers} from '@angular/http';

然后，您需要像这样声明类型标题的对象：

  headers = new Headers();
  url1;

之后，您必须将此内容附加到标头变量构造函数内部：

this.headers.append('X-RapidAPI-Key', 'c7ea217786msh32_Rest of your token_83fjsn7f8b8fe644f0');
this.url1 = 'https://api-football-v1.p.rapidapi.com/v2/leagueTable/2';

最后一步是这样填写您的方法：

   getStandings() {

       // tslint:disable-next-line: deprecation
       return this.http.get(this.url1 ,  {headers: this.headers}).pipe(
       map(res => res.json())
       );


   }

这就是使令牌正常工作而没有问题的全部。

使用带有Angular的football-data api

3 个答案: