web-dev-qa-db-ja.com

Angular 6 HTTPリクエストで非同期待機が機能しない

こんにちはangular 6を使用して、次のコードでREST APIを呼び出します。コードをasync-await関数と同期させるように努力しています。

async save() {

    if (this.changedRecords.length !== 0) {
          this.post('/api/devices/update-devices', this.changedRecords).
          then(x => { console.log("change"); console.log(`Resolved: ${x}`) });
    }
    if (this.newRecords.length !== 0) {
          this.post('/api/devices/new-devices', this.newRecords).
            then(x => { console.log("new"); console.log(`Resolved: ${x}`) });
    }
    if (this.deletedRecords != null) {
      this.post('/api/devices/delete-devices', this.deletedRecords).
        then(x => { console.log("deleted"); console.log(`Resolved: ${x}`) });
    }

}

  async post(url: string, list: DboDevice[]) {
    var result;
    if (list.length !== 0) {
      await this.http.post(url, list).subscribe(result => {
        result = true;
      }, error => {
        console.error(error);
        result = false;
      });
    }
    else {
      result = true;
    }
    return result;
  }

ただし、このコードを実行すると、コンソールで値が「解決済み：未定義」として返されます。これは、待ちがpost（）関数でプログラムを停止しないことを信じさせることにつながります。ここで何が間違っていますか？

angularasync-awaitrxjsangular6angular-promise
8
Joshua Vandenbor

Angularの_this.http.post_は、RxJS Observableを返します。次に、this.http.post(...).subscribe(...)を呼び出すと、RxJS Subscriptionオブジェクトが返されます。したがって、Promiseを返すものはないため、awaitで使用することはできません。

Observablesでawaitを使用できるようにするには、toPromise()の代わりにsubscribe()を使用する必要があります。観測可能（内部的にsubscribeを呼び出して、Promiseオブジェクトでラップします）。

_await this.http.post(...).toPromise(value => {
  ...
});
_

https://github.com/ReactiveX/rxjs/blob/master/src/internal/Observable.ts#L342-L354

13
martin