vue.js の async/await について

Question

前提・実現したいこと

apiと通信してその戻り値の処理がしたいが、非同期処理がうまく行っていない。

該当のソースコード

<button class="test" @click="test">test</button>

  methods: {
    async test() {
      console.log("test_button");
      const result = await setTimeout(function(){
        console.log('１！')
        return 'ok'
      }, 500)
      console.log('２！');
    },
...

testbutton
2！
１！

理想

理想は 1! 2! の順番だと思うのです。何か足りない記述があるかと思い、ググって見ましたが、基本的にはこれのみで非同期に処理ができているようです。ご存知の方がいらっしゃったらご教授いただけると嬉しいです！

Answer 1

特に setTimeout 関数を書き換えたりしていなければ、この関数の返り値は Promise 型ではなく、ただの数値です。したがって、await 構文は期待した動作をしません。

例えば以下のように、Promise オブジェクトを返すよう、setTimeout 関数をラップしてやる必要があります。

methods: {
  async test() {
    console.log("test_button")
    // async 関数内で await の次に、Promise オブジェクトが来ると、
    // その Promise が resolve 又は reject されるまで処理が待機されます。
    // 多くの非同期処理を行う関数はこの Promise オブジェクトを返すように作られますが、
    // 残念ながら setTimeout などの古い関数はそのように作られていません。
    const result = await new Promise(function(resolve, reject) {
      setTimeout(function() {
        try {
          console.log('１！')
          resolve('ok')
        } catch (e) {
          reject(e)
        }
      }, 500)
    })
    console.log('２！')
  }
  // => test_button
  // => １！
  // => ２！
}

Comments

[u.sayaka0112]

>Promise オブジェクトを返すよう、setTimeout 関数をラップしてやる必要がある
そうなんですね。。ありがとうございます。ちなみに自分で定義した関数についてもpromise でラップする必要があるという認識であっているでしょうか？

[R.Mizukami]

自分で定義するなら、最初から Promise オブジェクトを返すように作ればよいかと思います。
async 構文を利用すると、簡単に Promise オブジェクトを返す関数を作れます。

async function hoge() {}
const res = hoge()
console.log(res instanceof Promise) // => true