如何在 Angular 的 get 请求中发送从 post 请求返回的令牌

Question

我需要发送一个我在发布请求中收到的令牌。我必须在 get 请求中发送令牌，我正在做的是将 post 请求返回的令牌保存在一个中，请注意在GetToken 我将其发送到控制台显示，如果显示，即，如果它正在执行分配，但是当我尝试从ObternerInmueble() 打印它时它打印为空，我不知道为什么？

这是我的代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Inmueble } from '../modelos/inmueble';

@Injectable({
  providedIn: 'root'
})
export class HostlistService {
  cabecera = {
    'Accept': 'application/json',
    'Authorization': ""
  }

  parametros = {
    'grant_type':'client_credentials',
    'client_id': 1,
    'client_secret': 'clientSecret'
  }

  constructor(public http: HttpClient) {
  }

  obtenerToken(){
    return this.http.post<any>('URL',this.parametros).subscribe(
      result => {
        this.cabecera.Authorization=result.token_type+" "+result.access_token;
        console.log(this.cabecera.Authorization);  //here I can see that the value is being allocated
        this.obtenerInmuebles().subscribe();

      },error =>{
        console.log(error);
      }
    );
  }

  obtenerInmuebles() {
    console.log("Authorization-----------_>"+this.cabecera.Authorization);
    return this.http.get<any>('URL',{ headers: new HttpHeaders(this.cabecera) 
    });
  }

  mostrarCabecera(){
    console.log("CABECERA::::::::"+this.cabecera.Authorization);
  }
}

这是他调用方法的地方：

import { Component, OnInit } from '@angular/core';
import { HostlistService } from '../servicios/hostlist.service';
import {$,jQuery} from 'jquery';
import { Inmueble } from '../modelos/inmueble';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})

export class SliderComponent implements OnInit {
  inmuebles: Inmueble[] = [];
  i: number=0;

  url: string = "http://crm.seaconfiable.com/upload/";

  constructor(private hostlistService: HostlistService) { }
  ngOnInit() {
    this.hostlistService.obtenerToken();
    this.hostlistService.obtenerInmuebles().subscribe(
      result => {
        console.log("INMUEBLES",result.data);
      },error =>{
        console.log(error);
      }
    );
  }
}

这是浏览器控制台的图像，您可以在其中看到 Authorization 标头被发送为空（空白）：

Answer 1

问题出在以下几行 -

this.hostlistService.obtenerToken();
this.hostlistService.obtenerInmuebles().subscribe

this.hostlistService.obtenerToken() 方法在您订阅时发出 HTTP 调用，而在等待响应时 [由于 JS 的异步性质]，另一行被执行 this.hostlistService.obtenerInmuebles().subscribe。

你必须等待 this.hostlistService.obtenerToken() observable 的响应。为此，您应该使用管道函数（请参阅https://rxjs-dev.firebaseapp.com/guide/operators 的“管道”主题）并链接各种运算符（根据您的需要）来使用可观察链接。

您可以执行以下操作 -

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Inmueble } from '../modelos/inmueble';

@Injectable({
  providedIn: 'root'
})
export class HostlistService {

    cabecera = {
      'Accept': 'application/json',
      'Authorization': ""
    }

    parametros = {
      'grant_type':'client_credentials',
      'client_id': 1,
      'client_secret': 'clientSecret'
    }


  constructor(public http: HttpClient) {

  }


  obtenerToken(){
    return this.http.post<any>('URL',this.parametros);    
  }


  obtenerInmuebles(resultToken){
    console.log("Authorization-----------_>"+this.cabecera.Authorization);
    this.cabecera.Authorization=resultToken.token_type+" "+resultToken.access_token;
    return this.http.get<any>('URL',{ headers: new HttpHeaders(this.cabecera) });
  }

  mostrarCabecera(){
    console.log("CABECERA::::::::"+this.cabecera.Authorization);
  }

}

import { Component, OnInit } from '@angular/core';
import { HostlistService } from '../servicios/hostlist.service';
import {$,jQuery} from 'jquery';
import { Inmueble } from '../modelos/inmueble';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})

export class SliderComponent implements OnInit {
  inmuebles: Inmueble[] = [];
  i: number=0;

  url: string = "http://crm.seaconfiable.com/upload/";

  constructor(private hostlistService: HostlistService) { }
  ngOnInit() {

    this.hostlistService.obtenerToken()
        .pipe(
          mergeMap(resultToken => this.hostlistService.obtenerInmuebles(resultToken))
        )
        .subscribe(
          result => {
            console.log("INMUEBLES",result.data);
          },error =>{
            console.log(error);
          }
        );    
  }
}

我只修改了您的代码。尽管可能有更好的方法来做同样的事情。希望这会有所帮助。

在上面的代码中，我在 this.hostlistService.obtenerToken() 上使用了管道函数并应用了 mergeMap 运算符，这将确保一旦 this.hostlistService.obtenerToken() 的响应调用 this.hostlistService.obtenerInmuebles(resultToken)) 即可观察) 已收到，这就是我们想要的。

我强烈建议您查看以下网站以了解有关 rxjs 和各种运算符的更多信息 -

https://rxjs-dev.firebaseapp.com/guide/overview https://www.learnrxjs.io/

此外，您可以通过使用异步管道避免显式调用 subscribe()。请参阅以下内容 - https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0

编辑 2 [此编辑是为了展示如何在 localStorage 中保存令牌 [根据用户的要求] -

ngOnInit() {

    this.hostlistService.obtenerToken()
        .pipe(
          mergeMap(resultToken => {
            //do whatever you want to do with the token
            //i.e. Save the token in the localstorage like this - 
            localStorage.setItem("token",resultToken);
            return this.hostlistService.obtenerInmuebles(resultToken);
          })
        )
        .subscribe(
          result => {
            console.log("INMUEBLES",result.data);
          },error =>{
            console.log(error);
          }
        );    
  }