typescript - Angular 6 - 如何以正确的方式从另一个异步函数中的异步函数回调中获取价值？

Question

我有以下 HTTP 提供程序，它使用 subscribe 方法调用，如下例所示。问题是，在 GET 请求期间，我需要获取保存在本地存储中的令牌值，这是使用 HTTP 提供程序中函数 getToken 中的另一个提供程序发生的。我无法在 HTTP 调用中获取令牌值。我想问一下，请问如何以正确的方式做到这一点？

感谢您的任何建议。

this.httpProvider.doGetRequest(Constants.API_SERVER_URL+Constants.API_ENDPOINT_THREADS)
      .subscribe(res => {
        console.log(res);
        this.loading.dismiss();
      }, (error) => {
        console.log(error);
        this.err = error;
        this.loading.dismiss();
        this.presentToast();
      });

HTTP 提供者类：

@Injectable()
export class HttpProvider {

  constructor(public http: HttpClient,
              public dataProvider: DataProvider,
              public locStor: LocalStorageProvider) {
    console.log('Hello HttpProvider Provider');
  }

  public doGetRequest(url: string) {
    return this.http.get(url, this.getHeaders());
  }

  public doPostRequest(url: string, params: any) {
    return this.http.post(url, params);
  }

  public getHeaders() {
    return {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer test',
        'token': this.getToken()
      },
      params: new HttpParams()
    };
  }

  private getToken() {

    this.locStor.getValue(Constants.LS_KEY_USER_TOKEN).then((val) => {
      return val;
    });
    //return this.locStor.getValue(Constants.LS_KEY_USER_TOKEN);
    //return '222';
    //return this.dataProvider.getUser().token;
  }

}

---

更新后的版本

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {HttpHeaders} from "@angular/common/http";
import {LocalStorageProvider} from "../local-storage/local-storage";
import {Constants} from "../../app/constants";
import {Headers} from "@angular/http";
import {HttpParams} from "@angular/common/http";
import {DataProvider} from "../data/data";
import 'rxjs/add/observable/fromPromise';
import { Observable } from 'rxjs/Observable';
import {FromObservable} from "rxjs-compat/observable/FromObservable";
import {PromiseObservable} from "rxjs-compat/observable/PromiseObservable";


/*
  Generated class for the HttpProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class HttpProvider {

  constructor(public http: HttpClient,
              public dataProvider: DataProvider,
              public locStor: LocalStorageProvider) {
    console.log('Hello HttpProvider Provider');
  }

  public doGetRequest(url: string) {
    //return this.http.get(url);

    return Observable.fromPromise((this.getHeaders()).flatMap((headers) => {
      this.http.get(url, headers);
    }));

  }

  public doPostRequest(url: string, params: any) {
    return this.http.post(url, params);
  }

  public getHeaders() {
    /*
    return {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer test',
        'token': this.getToken
      },
      params: new HttpParams()
    };
    */

    return this.locStor.getValue(Constants.LS_KEY_USER_TOKEN).then((val) => {
      return {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Authorization': 'Bearer test',
          'token': val
        },
        params: new HttpParams()
      };
    });

  }

  private getToken() {
    this.locStor.getValue(Constants.LS_KEY_USER_TOKEN);
    /*
    this.locStor.getValue(Constants.LS_KEY_USER_TOKEN).then((val) => {
      return val;
    });
    */
    //return this.locStor.getValue(Constants.LS_KEY_USER_TOKEN);
    return '222';
    //return this.dataProvider.getUser().token;
  }

}

标签： typescriptpromiseangular6

Answer 1

我会做这样的事情：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/mergeMap'; 

@Injectable()
export class HttpProvider {

  constructor(public http: HttpClient,
              public dataProvider: DataProvider,
              public locStor: LocalStorageProvider) {
    console.log('Hello HttpProvider Provider');
  }

  public doGetRequest(url: string) {
    return Observable.fromPromise(this.getHeaders()).flatMap((headers) => {
      this.http.get(url, headers);
    });
  }

  public doPostRequest(url: string, params: any) {
    return this.http.post(url, params);
  }

  public getHeaders() {
    return getToken()
      .then((token) => ({
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Authorization': 'Bearer test',
          'token': token,
        },
        params: new HttpParams()
      });
  }

  private getToken() {
    this.locStor.getValue(Constants.LS_KEY_USER_TOKEN)
  }

}