Как я могу отправить токен, возвращенный из почтового запроса в запросе получения в Angular

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

Вот изображение консоли браузера, где видно, что заголовок авторизации отправляется пустым (пустым):

Answer 1

Проблема заключается в следующих строках -

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

Метод this.hostlistService.obtenerToken () создает HTTP-вызов при подписке, когда ожидается ответ [из-за асинхронной природы JS], другая строка была выполнена this.hostlistService.obtenerInmuebles (). subscribe.

Вы должны дождаться ответа от наблюдаемого this.hostlistService.obtenerToken ().Чтобы сделать это, вы должны использовать наблюдаемое сцепление с помощью функции конвейера (см. Раздел «Трубопровод» в https://rxjs -dev.firebaseapp.com / guide / operator ) и объединение различных операторов (в соответствии с вашими потребностями).

Вы можете сделать следующее -

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.obtenerInmuebles (resultToken)), наблюдаемый после ответаof this.hostlistService.obtenerToken () был получен, и это то, что мы хотим.

Я бы настоятельно рекомендовал проверить следующие сайты, чтобы узнать больше о rxjs и различных операторах -

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

Кроме того, вы можете избежать явного вызова подписки () с помощью асинхронного канала.Смотрите следующее - 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);
          }
        );    
  }

Answer 2

Я думаю, что первая проблема в том, что мы должны решить, что в вашем SliderComponent вы не подписаны на obtenerToken().В результате запрос не отправляется, и наблюдаемое значение не возвращается.

Далее, нет необходимости включать строку с this.hostlistService. obtenerInmuebles(), так как obtenerToken() уже вызывает этот метод.

Вот как вы можете реорганизовать свой код в SliderComponent:

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

Далее, на вашем HostlistService вы еще не должны подписываться на POST-запрос.Вы должны передать их по конвейеру и использовать соответствующие операторы RxJS ( mergeMap ) для обработки последующего запроса GET.

import { mergeMap } from 'rxjs/operators';

obtenerToken(){
  return this.http.post<any>('URL',this.parametros)
    .pipe(
      mergeMap(result => {
        this.cabecera.Authorization=result.token_type+" "+result.access_token;
        // call get request over here
        this.obtenerInmuebles();
      })
    );
}