順番に実行されるようにしたい

Question

すいません。
教えてください。

await/asyncを利用して順番に処理が行われるようにしたいです。
しかし、どうやっても非同期処理となり処理結果がバラバラで返ってきます…。

どのようにすれば同期処理として実行する事が出来るのでしょうか？

■ デモ環境
https://stackblitz.com/edit/angular-x2efpo?file=src/app/app.component.ts

■ 実際のソース

  main = async () => {
    await this.one()
    await this.two()
    await this.three()
  }

  push() {
    this.main();
  }

  one() {
    setTimeout(() => {
      console.log('1つめの処理')
    }, 1000)
  }

  two() {
    console.log('2つめの処理')
  }

  three() {
    setTimeout(() => {
      console.log('3つめの処理')
    }, 1000)
  }

■ 実行結果

どなたかご教示頂ければ幸いです。

Comments

[yasutomi]

質問タイトルには主語を入れてください。

Answer 1

thenをつかってはどうでしょうか？

one()
.then(() => two())
.then(() => three())

Comments

[inukujira]

回答ありがとうございました。
別のやり方で実装できましたのでご報告いたします！

Answer 2

await method() の構文は、method() の返り値が Promise オブジェクトの場合にその結果が解決されるまで待つ構文です。

したがって、one() ～ three() メソッドの返り値は Promise オブジェクトにしなければなりません。

たとえば、 one() メソッドは以下のように書き換えます。

// one() {
//   setTimeout(() => {
//     console.log('1つめの処理')
//   }, 1000)
// }
one() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('1つめの処理')
      resolve()
    }, 1000)
  })
}

new Promise(callback) で Promise オブジェクトを生成し、非同期の処理が終了したタイミングで callback の第一引数に与えられた resolve 関数を実行します。

two() のように即座に結果を解決する場合は、以下のように書くこともできます。

two() {
  return Promise.resolve(console.log('2つめの処理'))
}

参考 > Promise - JavaScript | MDN

Comments

[inukujira]

ありがとうございました！
この方法で解決しました＾＾