Question

我需要发送在邮寄请求中收到的令牌。我必须在get请求中发送令牌，我正在做的是将post请求返回的令牌保存为一个，请注意，在GetToken中，我通过控制台将其发送给show，如果显示的话，是，如果它正在执行分配，但是当我尝试从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标头发送为空（空白）：

consola del navegador

Answer 1

问题出在以下几行-

ir_attachment.res_field

您订阅时，this.hostlistService.obtenerToken（）方法发出HTTP调用，等待响应[由于JS的异步特性]，另一行执行了this.hostlistService.obtenerInmuebles（）。subscribe。< / p>

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

您可以执行以下操作-

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

我仅修改了您的代码。尽管有更好的方法可以做到这一点。希望这会有所帮助。

在上面的代码中，我在this.hostlistService.obtenerToken（）上使用了管道函数，并应用了mergeMap运算符，该操作符可确保一旦this.hostlistService.obtenerToken（）已收到，这就是我们想要的。

我强烈建议您检查以下网站，以进一步了解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中-

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

Answer 2

我认为第一个问题是我们应该解决的是，您没有订阅SliderComponent。结果，不会分派该请求，并且不会返回可观察的值。

接下来，由于obtenerToken()已经在调用该方法，因此无需在this.hostlistService. obtenerInmuebles()中包括该行。

这是在obtenerToken()中重构代码的方式：

SliderComponent

接下来，在您的ngOnInit() { this.hostlistService. obtenerToken().subscribe( result => { console.log("INMUEBLES",result.data); },error =>{ console.log(error); } ); }上，您还不应该订阅POST请求。您应该通过管道传输它们，并使用各自的RxJS运算符（mergeMap）处理后续的GET请求。

HostlistService

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

2 个答案: