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()))
    })

  }
}