Vue.jsで非同期処理関数を作る方法

皆さんこんにちは！！！

今回はVue.jsで非同期処理関数を作る方法をご紹介します！

めちゃめちゃ簡単なので、ぜひ学習の参考にしてください。

それでは説明していきます。

#Promiseを用いて関数を作成#

今回はTimeoutの関数を非同期処理で行います。

Vue.jsで非同期処理関数を作成する際は、宣言時にPromiseを利用するのではなく、返り値として利用します。

App.vue

<script>
  export default{
    methods: {
        sleep(mesc) {
          return new Promise((resolve) => {
            setTimeout(resolve, mesc)
        })
      } 
    },
  }
</script>

#エラー対処#

Vue2.x系を使っている方は下記のようなエラーが出ると思います。（出ない方はスルーして結構です）

error: npm i core-js/fn/promise

このエラーの対処の仕方は、僕が書いた記事core-jsの依存関係エラー（core-js/～/～）対処法を参考にして頂くと、恐らく解決できます。解決できない場合はコメント欄にてご報告をお願いします。

以上、「Vue.jsで非同期処理関数を作る方法」でした！

めちゃめちゃ簡単♪

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading