本地存储的 Angular 异步问题

Question

我刚开始使用 Angular，我正面临一些异步操作的问题。我正在尝试将类私有(private)值设置为将在 http 请求中使用的本地存储键值，但在可以从存储中检索键之前，http reuqest 会触发。我正在使用 ionic native 存储。实现此操作的正确方法是什么？任何帮助将非常感激。这是我的代码:

export class EventService {
 constructor(private _http: Http, private _storage: Storage) {
}

private url = 'http://website.com';
private token : string;

getEventsAction() {
  this._storage.ready().then(() => {
    this._storage.get('auth_token').then((val) => {
      this.token = val;
    });
});

let params = {
  "query": {
    "search_term": "", "page": 1
  }
};
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Auth-Token', this.token);

let options = new RequestOptions({headers: headers});

return this._http.post(this.url + '/api/events/list', params, options)
  .map((response: Response) => {
    let events = response.json();
    if (events) {
      return events;
    }
  });
}

Answer 1

您必须在调用存储回调后 发送http 请求。这是您使用私有(private)方法更新的代码，以使代码更清晰:

export class EventService {
    constructor(private _http: Http, private _storage: Storage) { }

    private url = 'http://website.com';
    private token : string;

    getEventsAction() {
        this.retrieveToken().catch(() => {
            // You can log something here, the 'then' callback will be always executed anyway
        }).then(() => { 
            this.sendHttpRequest();
        });
    }

    private retrieveToken(): Promise<any> {
        return this._storage.ready().then(() => {
            return this._storage.get('auth_token').then((val) => {
                this.token = val;
            }).catch(() => {
                // Set default token if storage.get() raised an exception
                this.token = 'defaultToken';
            });
        });
    }

    private sendHttpRequest() {
        let params = {
            "query": {
                "search_term": "", "page": 1
            }
        };
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Access-Control-Allow-Origin', '*');
        headers.append('Auth-Token', this.token);

        let options = new RequestOptions({headers: headers});

        return this._http.post(this.url + '/api/events/list', params, options)
        .map((response: Response) => {
            let events = response.json();
            if (events) {
                return events;
            }
        });
    }
}