async、awaitの使い方について教えてください

Question

ionic3（Angulr4）でasync、awaitを使って同期的に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() {

    for (let i = 0; i < 3; i++) {
      console.log(i)
      this.requestApiAsync().then(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()))
    })
  }
}

エラー

mUncaught Error: Module parse failed: The keyword 'yield' is reserved (21:25)
You may need an appropriate loader to handle this file type.
|         this.http = http;
|         this.requestApiAsync = function () {
|             var result = yield _this.requestApi();
|             return result
|         };
 

Comments

[spookybird]

トランスパイラはbabelでしょうか？トランスパイラが何で、バージョンがいくつかを教えてください。それから、このエラーってどこに出るエラーですか？　・・・トランスパイルがミスってるように思うんですが...yieldはジェネレータ関数内でしか使えないはず...？　これかな...？ https://github.com/gcanti/babel-plugin-tcomb/issues/95

[spookybird]

すみません。babelのバージョンだけじゃわかんないですね。babelのプラグインすべてのバージョンを教えてください。

Answer 1

数年前の質問に今更ですが

クラス内の文法が間違っているように見えます。

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

の部分ですが、正しくは

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

です。

クラス直下では代入文を書くことができません。

また、requestApiAsyncは必要のない関数です。

この場合this.requestApiAsync().then(…)としていますが、this.requestApi().then(…)でも同じ話ですね。