【JavaScript】axios async/await・Promise型を使ってみる

こんにちは、shinoです。毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。

今回は、axiosを利用していて書き方の違いを紹介していきます。axiosを初めて使う方向けに書いてみます。私も最近少し使っただけなので調べながらやっている状態です。書き方の違いをみると、難しくはないので確認してみて下さい。

今回の事象

axiosの処理の書き方には、種類があります。

一つ目は、Promiseを使った処理の書き方、二つ目は、async/awaitを使った処理です。両方とも簡単に説明していきます。

言葉で説明は後で書きますが、簡単な書き方は以下のものです。構築としては、nuxtを利用してる環境です。method内での処理です。

test() {
      this.$axios.get('http://localhost:3000/api/HttpTrigger')
      .then((res) => this.data = res.data)
    }

test() {

this.$axios.get('http://localhost:3000/api/HttpTrigger')

.then((res) => this.data = res.data)

}

Promiseの処理とは、簡単に書くと非同期処理が完了した際に結果を返すものです。非同期処理は、A処理が終わる前にB処理が行われるようになります。

上記の処理の書き方は、.thenはaxios処理が終わった時に行われるものなのでPromise処理になります。Promiseにて.thenを使う処理は、コールバック処理となります。

.thenを連ねることで処理をつなげていけます。

ここでも最初に、コードを書いてみます。

async test() {
      const res = await this.$axios.get('http://localhost:3000/api/HttpTrigger')
      this.data = res.data
    }

async test() {

const res = await this.$axios.get('http://localhost:3000/api/HttpTrigger')

this.data = res.data

}

簡単にいうと、async/awaitを使うことで同期処理ぽく書くことができます。
axiosの前に、awaitをつけるとaxiosの処理が終わるまで待ちます。

なのでしたの関数への代入が行われます。

asyncに関しては、method名につける必要があります。イメージとしては、awaitを使う際には、asyncをセットで使うような感じです。

お疲れ様です。axios処理は解決できたでしょうか？
他にもエラー情報等も掲載してあるので読んでみて下さい。

解決できなければ、NuxtJS公式を確認してみるのもいいと思います。

ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。