Ionic 4 - 将令牌的承诺转换为可观察的？答案

【问题标题】：Ionic 4 - convert promise for token to observable?Ionic 4 - 将令牌的承诺转换为可观察的？
【发布时间】：2019-11-06 01:12:25
【问题描述】：

我正在尝试提交帖子，并发送带有标头的令牌。但是我的 storage.get 返回一个承诺，我不知道如何从 storage.get 中获取令牌的值。我认为将其转换为 observable 可能会有所帮助，但我不知道该怎么做。

  sendPostRequest() {
    var token: string;
    this.storage.get('ACCESS_TOKEN').then((val) => {
      token = val;
    });
    const headers = new HttpHeaders()
    .set('Accept', 'application/json')
    .set('Content-Type', 'application/json')
    .set('Authorization',  'Bearer ' + token)
    .set('responseType', 'text');
    let postData = this.signatureForm.value;
    this.httpClient.post("http://localhost:3000/signature", postData, { headers: headers })
      .subscribe(data => {
        this.presentToast();
      }, error => {
          this.showError = true;
          this.errorMessage = error.error.message
    });
  }

【问题讨论】：

如果你真的想把你的promise转换成一个observable，你可以使用RxJS的from()函数。但正如答案中提到的那样，你真的不需要它。

标签： angular rxjs ionic4

【解决方案1】：

鉴于storage.get() 是异步的，您应该在then 块中处理后续操作。这将防止token 成为undefined 的问题，因为您需要等待来自storage.get() 的承诺返回。

sendPostRequest() {
    var token: string;
    this.storage.get('ACCESS_TOKEN').then((val) => {
      token = val;

      const headers = new HttpHeaders()
        .set('Accept', 'application/json')
        .set('Content-Type', 'application/json')
        .set('Authorization',  'Bearer ' + token)
        .set('responseType', 'text');

        let postData = this.signatureForm.value;
        this.httpClient.post("http://localhost:3000/signature", postData, { headers: headers })
          .subscribe(data => {
            this.presentToast();
          }, error => {
            this.showError = true;
            this.errorMessage = error.error.message
          });
    });

  }

但是，如果你想使用 Angular/RxJS 的方式来实现，你可以使用 RxJS from 操作符将 Promise 转换为 observable。然后，后续的 token 分配和 post 请求的返回可以在 pipeable 操作符中处理，例如switchMap。

from(this.storage.get('ACCESS_TOKEN'))
  .pipe(
     switchMap((val) => {
       token = val;
       // do the rest here
       // return this.httpClient.post()
     }),
   ).subscribe(data => {
     this.presentToast();
   }, error => {
     this.showError = true;
     this.errorMessage = error.error.message;
   });

【讨论】：

【解决方案2】：

你必须在你的 Promise 的成功回调中实现逻辑，像这样：

    sendPostRequest() {
      var token: string;
      this.storage.get('ACCESS_TOKEN').then((val) => {
        this.postSignature(val);
      });
    }

    private postSignature(token: string) {
    const headers = new HttpHeaders()
         .set('Accept', 'application/json')
         .set('Content-Type', 'application/json')
         .set('Authorization',  'Bearer ' + token)
         .set('responseType', 'text');
    let postData = this.signatureForm.value;
    this.httpClient.post("http://localhost:3000/signature", postData, { headers: headers })
         .subscribe(data => {
           this.presentToast();
         }, error => {
          this.showError = true;
          this.errorMessage = error.error.message
         });
    }

Promise 是异步的，这意味着在完成请求之前你没有令牌值，这就是为什么你需要在成功回调中实现逻辑。

【讨论】：