Observables

Question

我正在尝试从需要Authorization标头的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');       

      }
    });

赞赏！

Answer 1

在getData()中，当您在该方法中执行Observable时，您实际上看起来并未返回subscribe()。相反，请尝试删除订阅并使用map()运算符返回Observable，以便在getData()中调用data.component.ts时可以subscribe()到可观察流：

的DataService：

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);
}

data.component.ts：

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

除了map()之外，您还可以使用typechecking of the response来指定数据返回类型并有效地使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'
  });
}

希望这有帮助！

Answer 2

问题是您服务中的（无用）.subscribe电话。您似乎不仅误解了观察者的工作方式，而且误解了subscribe method中应该发生的事情。

简而言之

Observables

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

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

您的案例

您在订阅服务时犯了一个错误。此外，您在订阅中无所作为的错误。

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

// 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
  })
}

您现在可以在模板中显示您的数据（或随意使用它）。

具有授权标头401的Angular 4 HTTP Get Request

2 个答案:

Observables

您的案例