Angular 4：http 客户端模块获取请求。 API 密钥放置答案

【问题标题】：Angular 4: http client module get request. API Key placementAngular 4：http 客户端模块获取请求。 API 密钥放置
【发布时间】：2017-12-22 20:13:38
【问题描述】：

在 ionic/angular4 中使用 HttpClientModule 进行 api 调用时，我将 api 密钥放在哪里？我打电话的网站说使用 curl 这个 curl 命令：

curl -X GET https://jsonodds.com/api/odds -H "JsonOdds-API-Key: 
yourapikey"

我应该如何更改此代码以包含 api 密钥？：

 apiUrl = "https://jsonodds.com/api/odds/nfl"

 getNFL() {
   return new Promise(resolve => {
     this.http.get(this.apiUrl).subscribe(data => {
     resolve(data);
   },   err => {
  console.log(err);
   });
 });

【问题讨论】：

标签： angular get httpclient

【解决方案1】：

使用以下代码：

apiUrl = "https://jsonodds.com/api/odds/nfl"

 getNFL() {
   return new Promise(resolve => {
     this.http.get(this.apiUrl, { headers: new HttpHeaders().set("JsonOdds-API-Key", "your-api-key")).subscribe(data => {
     resolve(data);
   },   err => {
  console.log(err);
   });
 });

希望对你有帮助

【讨论】：

谢谢，现在我收到此错误：错误：未捕获（承诺中）：TypeError：{（中间值）}.subscribe 不是函数。

【解决方案2】：

使用自定义拦截器，可以将 api 密钥自动添加到每个 http 调用中。如果您想了解更多关于拦截器的信息，请阅读here。

apikey.interceptor.ts

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class ApiKeyInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // add the header to the cloned request
    const authReq = req.clone({headers: req.headers.set('JsonOdds-API-Key', 'yourapikey')});

    return next.handle(authReq);
  }
}

不要忘记在AppModule 中注册您的拦截器。

app.module.ts

import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS} from '@angular/common/http';

import {ApiKeyInterceptor} from 'apikey.interceptor';

@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: ApiKeyInterceptor,
    multi: true,
  }],
})
export class AppModule {}

【讨论】：

【解决方案3】：

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'JsonOdds-API-Key', 'yourapikey'
  })
};

 apiUrl = "https://jsonodds.com/api/odds/nfl"

 getNFL() {
   return new Promise(resolve => {
     this.http.get(this.apiUrl,httpOptions ).subscribe(data => {
     resolve(data);
   },   err => {
  console.log(err);
   });
 });

//new HttpHeaders().set method is used to return a clone of the current instance with the new changes applied.

【讨论】：