HTTP 客户端请求 AWS API 网关

Question

我有一个使用 typescript 的 angular 前端，我正在尝试向 AWS API-Gateway 发出 http 请求。 现在的问题是，我需要将以下 javascript 代码编写为 typescript 代码并发送 http 请求，但我不知道如何。

对 AWS API 网关的请求需要 AWS Cognito jwtToken（在本例中为“accessToken”）。 我还需要传递“类型”，这是要在 API 上执行的 function 的名称（在本例中为“POST”）。 我还需要传递一个字符串来选择我收到的数据。

Auth.currentSession().then(tok => {
      const accessToken = tok.getIdToken().getJwtToken();
      console.log('from floorview: ' + accessToken);

      function requestItem(source) {

        $.ajax({
          type: 'POST',
          url: 'https://XXXXXXXXXX.execute-api.eu-central-1.amazonaws.com/prop/dashboard',
          headers: {
            Authorization: accessToken
          },
          data: JSON.stringify({
            Source: source.toString(),
            tableName: 'h16b-testset',
            operation: 'read'
          }),
          dataType: 'json',
          contentType: 'application/json',
          success: completeRequest,
          error: function ajaxError(jqXHR, textStatus, errorThrown) {
            console.error('Error requesting ride: ', textStatus, ', Details: ', errorThrown);
            console.error('Response: ', jqXHR.responseText);
            alert('An error occured when requesting your unicorn:\n' + jqXHR.responseText);
          }
        }).then(r => console.log(r));
      }

      requestItem(996);

      function completeRequest(result) {
        console.log('Response received from API: ', result);
      }

    });
  }

现在我的问题是，如何在使用 angulars HTTPClient 时将此 javascript 代码编写为 typescript 代码。 如果还有其他方法，请告诉我。 当我尝试使用 HTTPClient 运行此代码时，总是得到 401 或 403。

Auth.currentSession().then(tok => {
      const accessToken = tok.getAccessToken();
      const jwt = accessToken.getJwtToken();

      this.authKey = jwt;


      const params = new HttpParams().set('Source', '996');
      params.append('tableName', 'h16b-testset');
      params.append('operation', 'read');
      const headers = new HttpHeaders().set('Authorization', this.authKey);
      headers.append('content-type', 'application/json');

      this.http.request(
        'POST',
        'https://XXXXXXXX.execute-api.eu-central-1.amazonaws.com/prop/dashboard',
        {
          headers,

          responseType: 'json'
        }
      ).subscribe(
        res => {
          console.log('hallo' + res);
        },
        err => {
          console.log('error occured with httpclient: ' + err.message);
        }
      );
    });

Answer 1

您可以编写如下内容（使用concatMap运算符）：

import { from } from 'rxjs';
import { concatMap } from 'rxjs/operators';

export class AuthService {

  constructor(private http: HttpClient) {
    from(Auth.currentSession())
    .pipe(concatMap(tok => this.requestItem(tok, 996)))
    .subscribe(
        result => console.log('Response received from API: ', result),
        err => {
          console.log('error occured with httpclient: ' + err.message);
        }
     );
  }

  requestItem(token, source) : Observable<any> {
    this.http.post(url, {
            Source: source.toString(),
            tableName: 'h16b-testset',
            operation: 'read'
          }, 
         headers,
         params
    );
  }
}

Answer 2

将您的 http 客户端重写为：

    this.http.post(
          'https://XXXXXXXX.execute-api.eu-central-1.amazonaws.com/prop/dashboard',
          {
            Source: '<id>',
            tableName: 'h16b-testset',
            operation: 'read'
          },
          {
              headers: new HttpHeaders({'Content-type': 'application/json', 'Authorization': '<token>'})
          }
    ).subscribe(res=> console.log(res), failure => console.error(failure))

这样，您将在请求正文中发送源，并在 header 中使用授权令牌。

有关HttpClient的更多信息，请参阅https://angular.io/guide/http 。