0

我正在尝试从需要授权标头的 API 获取数据。它在 Postman 和 Node 上运行良好，但是当我尝试在 Angular 中使用它时，它只会返回 401。有人能在我的请求中找到错误吗？花了很长时间尝试，但找不到解决方案。

这是我的data.service.ts

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

@Injectable()
export class DataService{

constructor(private authHttp: HttpClient) {}

  getData()
  {
    return this.authHttp.get('<<API URL>>', {
      headers:
          new HttpHeaders()
          .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS') 
          .append('Access-Control-Allow-Origin', 'http://localhost:4200')
          .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
          .append('Authorization', "<<my token>>")
          , responseType:'text'})
          .subscribe(data => data);


  }

}

这是我为检索该数据而对服务进行的调用，但 subscribe 方法返回错误

“订阅”类型上不存在属性“订阅”。您的意思是“取消订阅”吗？

这是我的 data.component.ts （为简洁起见删掉一些行）

constructor(private dt: DataService) { }

this.dt.getData().subscribe(result => {

      if (result){

        console.log(result);        

      }
      else  {

        console.log('no result');       

      }
    });

赞赏！

4

2 回答 2

0

问题是您的服务中有一个（无用的）.subscribe调用。似乎您不仅误解了 observables 的工作原理，还误解了subscribe method.

Observables 简而言之

Observable 是一个通过时间跟踪事件的对象；也称为流。当你调用.get方法时HttpClient，你正在创建一个 observable。将可观察对象视为时间数组（而不是计算机内存空间中的数组）。

这一切都很好，但是除非您可以读取它发出的值，否则这个流是无用的。这是通过订阅流来完成的。您使用方法订阅.subscribe。此方法的参数是一个函数，每次观察到一个值时都会执行该函数。

你的情况

您在订阅服务时犯了一个错误。此外，您犯了一个错误，即在订阅中什么都不做。

您的服务应该只返回可观察的，而不是订阅。

// in the service

getData() {
  return this.authHttp.get(example.com, headers)
}

然后，在您的组件中，您应该订阅从您的服务返回的 observable。

// in the component

public data: any

ngOnInit() {
  this.service.getData().subscribe(data => {
     // once data arrives, this function will be called.
     // "data" will be data returned from your server,
     // so we can store it permanently in a property of the class
     this.fetchedData = data
  })
}

您现在可以在模板中展示您的数据（或随心所欲地使用它）。

于 2017-12-13T20:10:02.270 回答
0

在getData()它看起来不像你在该方法Observable中执行时实际上返回了一个。subscribe()而是尝试删除 subscribe 并使用map()运算符返回 an Observable，以便在调用getData()时data.component.ts可以subscribe()到 observable 流：

数据服务：

getData() {
  return this.authHttp.get('<<API URL>>', {
    headers:
      new HttpHeaders()
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS')
        .append('Access-Control-Allow-Origin', 'http://localhost:4200')
        .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
        .append('Authorization', "<<my token>>")
    , responseType: 'text'
  })
  .map(data => data);
}

数据.component.ts：

this.dt.getData().subscribe(result => { // do something with the result });

除了map()您还可以利用响应的类型检查来指定数据返回类型并有效地使map()不必要的，除非您需要在到达之前对数据进行额外处理data.component.ts：

interface SomeModel {
   foo: string;
   bar: number;
   foobar: string[];
}

getData() {
  return this.authHttp.get<SomeModel>('<<API URL>>', {
    headers:
      new HttpHeaders()
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS')
        .append('Access-Control-Allow-Origin', 'http://localhost:4200')
        .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
        .append('Authorization', "<<my token>>")
    , responseType: 'text'
  });
}

希望这会有所帮助！

于 2017-12-13T20:02:16.453 回答