vue3非同期

vue3のmethodsの中で非同期処理する

jsの非同期はいつも苦労する。

結局これが一番役立った

How to use async/await in Vue.js?
I'm new in ES7 I want to use async/await in Vue.js Here is my code created (){ this.getA() console.log(2) this.getB() }, methods : { getA ()...

コツ

methods: {} の中にて、

axios.get()を含む全体をreturn new Promise(resolve => {})の中に閉じ込め、Promiseを返すようにする。

それをawaitで受ける。

それを覆う関数にasyncを付ける。

  methods: {
    async getLinks() {
      // この2つを順番通りにしたい
      await this.getAnswer()
      this.getWait()
    },
    getWait: () => {
      console.log('--wait a minitues.')
    },
    getAnswer(){
      return new Promise(resolve => {
          axios.get('https://qiita.com/api/v2/items', { params })
          .then(function (response) {
            console.log('--We got items')
            resolve('resolved')
          })
          .catch(function (error) {
            resolve('rejected')
          })
          .finally(function () {
            '';
          })
      })
    },
  }

実験

Udemyで学習しつつAPI処理があってもそれを待って順番通り処理する処理を実験した。

vue3-promise/src/components/Qiita.vue at qiita-api · hotchrome2/vue3-promise
Contribute to hotchrome2/vue3-promise development by creating an account on GitHub.

別の参考

【Vue.js】Async/awaitとaxiosによる非同期処理 - Qiita
methodsに記述したaxiosによるHTTP通信の完了を待ってから残りの処理をしたい必要があったのですが、少し詰まったので記録として残しておきます。※Async/awaitやaxiosについて…
Vue.jsでのasync,awaitの書き方 - Qiita
#1. この記事はなに?Vue.jsでのasyc,awaitの書き方をメモする。#2. 例題の説明フロントエンド(Webサイト)に整数Nを入力し、バックエンドで計算(N+3)をする。また、計…
スポンサーリンク

コメント

タイトルとURLをコピーしました