时间戳

首页 > 解决方案 > 在 Ionic 4 中处理异步和存储以进行 api 调用

angular - 在 Ionic 4 中处理异步和存储以进行 api 调用

问题描述

在我的应用程序中，我正在使用 Ionic Storage 保存一个用于连接 api 的令牌，问题是我不知道这是处理异步的正确形式，因为我没有在正确的时间获得令牌来制作调用 api。

播放器.page.ts

ngOnInit() {
    this.playerService.getPlayers().subscribe(data => {
      this.players = data;
    });
  }

全球服务.ts

  getToken(){
    this.storage.get(this.token_key).then((val) => {
      this.token = val;
    })
    return this.token;
  }

播放器.service.ts

  getPlayers() {
    return this.api.get('GetPlayers');
  }

api.service.ts

 getHeaders() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + this.global.getToken()
      })
    };
    return httpOptions;
  }

  get(route:any)
  {
    return this.http.get(this.global.urlAPI + route , this.getHeaders());
  }

标签： angularionic-framework

解决方案

在 global.service.ts 中的函数 getToken() 中，当 promise 被解决时，您将在其中为 this.token 赋值，但您应该返回这样的 promise -

getToken() {
    return this.storage.get(this.token_key);
}

然后在来电者中 -

getToken().then((value) => {
    //do assignment here
}

你目前的做法，即使在 promise 被解决之前，也总是会从函数中返回值。

编辑：根据您的评论。你想在 promise 解决后返回一个值。由于您不能从 promise 内部执行此操作，您可以做的是使函数异步并使用 await 进行分配。然后返回你的对象，比如 -

async getHeaders() {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + await this.global.getToken()
        })
    };
    return httpOptions;
}

然后在任何你想要的地方调用这个函数 -

getHeaders().then((value) => {
    console.log(value);
});

因为异步函数总是返回一个 promise 。你也可以做承诺链，但我认为这种方法更干净

推荐阅读