Header nicht im Speicher gesetzt Versprechen

Question

Ich versuche, eine Kopfzeile zu meinem API Anruf hinzufügen, aber ich muss Auth-Token bekommen und das auf die Kopfzeile setzen. Aber wenn ich versuche, den folgenden Code auszuführen, wird er nicht gesetzt, sondern nur der Inhaltstyp.

import {HttpClient, HttpHeaders} from '@angular/common/http'; 
import {Component, Injectable} from '@angular/core'; 
import { Storage } from "@ionic/storage"; 
import 'rxjs/add/operator/map'; 

@Injectable() 
@Component({ 
    providers: [HttpClient] 
}) 
export class DataProvider { 
    public token:string; 

constructor(public http: HttpClient, public storage: Storage) {} 

getsomething(){ 

let headers = new HttpHeaders(); 
headers = headers.set('Content-Type', 'application/json'); 
this.storage.get('token').then((val) => { 
    this.token = val; 
    console.log(this.token); 
    headers = headers.set('AuthToken', this.token); 
}); 

console.log(headers); 

return this.http.get('http://localhost:54951/getfarms', { 
    headers: headers 
}); 

}

Answer 1

Die header.set() Funktion nicht zurück ein Header-Instanz die folgenden

headers = header.set('AuthToken', this.token); //change the line 
headers.set('AuthToken', this.token); //do not reassign the headers object 

Answer 2

Sie können also nicht den Wert, den Sie in this.storage.get('token').then richtig eingestellt verwenden nach dem Anruf an then. Das Versprechen wird den Handler nicht sofort ausführen, da es eine asynchrone Operation ist.

getsomething() { 

    let headers = new HttpHeaders(); 
    headers = headers.set('Content-Type', 'application/json'); 
    return this.storage.get('token').then((val) => { 
     this.token = val; 
     console.log(this.token); 
     headers = headers.set('AuthToken', this.token); 


     console.log(headers); 

     return this.http.get('http://localhost:54951/getfarms', { 
      headers: headers 
     }); 
    }); 
} 

Oder mit Asynchron/erwarten

async getsomethingAsync() { 

    let headers = new HttpHeaders(); 
    headers = headers.set('Content-Type', 'application/json'); 
    let val = await this.storage.get('token') 
    this.token = val; 
    console.log(this.token); 
    headers = headers.set('AuthToken', this.token); 


    console.log(headers); 

    return this.http.get('http://localhost:54951/getfarms', { 
     headers: headers 
    }); 
} 

Answer 3

können Sie versuchen, als mit Observable.flatMap im folgenden Beispiel

import { HttpClient, HttpHeaders } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { Storage } from "@ionic/storage"; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/mergeMap'; 

@Injectable() 
export class DataProvider { 
    constructor(public http: HttpClient, public storage: Storage) { } 

    getsomething() { 
    return Observable.fromPromise(this.storage.get('token')).flatMap((token) => { 
     console.log(token); 
     let headers = new HttpHeaders(); 
     headers = headers.set('Content-Type', 'application/json'); 
     headers = headers.set('AuthToken', token); 
     console.log(headers); 

     return this.http.get('http://localhost:54951/getfarms', { 
     headers: headers 
     }); 
    }); 
    } 
}