async awaitが意図した動きになりません

Question

ionic3（Angular4）でasync、awaitを使った同期処理でAPIへのリクエストを順次行う処理を実装しています。

以下のようなコードで、こちらの出力を期待しているのですが、

0
APIのレスポンス
1
APIのレスポンス
2
APIのレスポンス

このような形になってしまいます。何がまずいのでしょうか？

0
1
2
APIのレスポンス
APIのレスポンス
APIのレスポンス

コード

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http, Headers,RequestOptions } from '@angular/http'
import { Observable, Subject } from 'rxjs'

import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    public http: Http
  ) {
  }

  ionViewDidEnter() {
    // 実験1
    for (let i = 0; i < 3; i++) {                                                                                                                                                                                                             
      (async () => {
        console.log(i)                                                                                                                                                                                                                          
        let result = await this.requestApi()                                                                                                                                                                                                  
        console.log(result)                                                                                                                                                                                                                   
      })()                                                                                                                                                                                                                                    
    }                                                                                                                                                                                                                                         

    // 実験2
    for (let i = 0; i < 3; i++) {
      console.log(i)
      this.requestApiAsync(result => console.log(result))                                                                                                                                                                                                             
    }    
  }
  async requestApiAsync() {
    const result = await this.requestApi()
    return result
  }

  requestApi() {
    return new Promise(resolve => {
      let url = 'http://example.com/path/to'
      let body = 'key=value'

      let headers = new Headers({
        "Content-Type": "application/x-www-form-urlencoded"
      })

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

      return this.http.post(url, body, options)
        .map(response => response)
        .catch(error => error)
        .subscribe(result => resolve(result.json()))
    })

  }
}

Answer 1

そもそもasync/awaitは同期的に動作するわけではなく、
単なるPromiseの糖衣構文なので、awaitの右辺にあるpromiseに以降の文を関数化して.then(fn)でくっつけた動作しかしません。

JSのイベントループの考え方の理解がまだ少し足りていませんね。
JSは大雑把に下の流れで駆動します。

• JSは同期的な処理は全てその場で実行して終わらせる
• 「ToDoとして関数化したやりたい事」をイベント発火条件に登録する
• 実行が終わった後に、イベントループで巡回し、イベント発火条件を満たしたToDoになってる関数を実行

Promiseを作るというのは、イベント発火条件に関数作って登録しているだけであり、
for文をぐるぐる回す方がまず優先されます。
従って、ionViewDidEnterの2つの手法はどちらもPromiseを3つ作る事だけが目的ですので、
質問文に書いてあるように1〜3の文字が先に表示されます。

理想の形にしたければこう書くしかありません。
（まぁ抽象化の仕方とか考えてば色々工夫しがいはあるでしょうけどね）

ionViewDidEnter() {
  console.log(1)
  this.requestApiAsync(result => console.log(result))
    .then(() => {
      console.log(2)
      return this.requestApiAsync(result => console.log(result))
    })
    .then(() => {
      console.log(3)
      return this.requestApiAsync(result => console.log(result))
    })
}

これは流石に酷いので現実はionViewDidEnterもasync関数として宣言し、
await構文を有効化させます。

async ionViewDidEnter() {
  for (let i = 1; i <= 3; i++) {
    console.log(i);
    await this.requestApiAsync(result => console.log(result))
  }
}

Comments

[yoppy0066]

ありがとうございました！

Answer 2

実験1でいうと、for文中の匿名関数内での実行順はちゃんとawaitされていますが、
匿名関数の実行自体はawaitされておらず、
前のループの匿名関数の完了を待たずに次のループに入ってしまってます。
なので例えば...

const foo = () => new Promise(resolve => setTimeout(resolve('foo'), 1000))

const bar = async () => {
  for (let i = 0; i < 3; i++) {
    await (async () => { // <-- ここにawaitがあると想定どおりになります
      console.log(i)
      let result = await foo()
      console.log(result)
    })()
  }
}

bar()

追記: 読み返すと冗長でした。リファクタ後↓↓↓

const bar = async () => {
  for (let i = 0; i < 3; i++) {
    console.log(i)
    let result = await foo()
    console.log(result)
  }
}

Comments

[yoppy0066]

ありがとうございました！