親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Nuxtの$axiosにおけるgetと$getの違い

Nuxtで使用する$axios

SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、
Nuxtの場合はnuxt-community/axios-moduleのモジュールを使うことが一般的でしょう。

注意したいのが、何も考えずに

$axios.$get

とやると、いつも取得できている内容と変わっていることに戸惑うことがあるでしょう。

書き方によって取得できる情報は異なるのです。

getと$getの違い

getで取得するパターン

$axios.getで取得する場合、レスポンスは以下のものが取得できます。

response
  |- data レスポンスデータ
  |- status ステータスコード
  |- statusText ステータステキスト
  |- headers レスポンス
  |- config コンフィグ

$getで取得するパターン

$axios.$get

で取得する場合、レスポンスは上記の中でレスポンスデータのみを直接取得することになるのです。
なので、何も考えずにこの取得方法で実装すると、今までとの違いに戸惑うことでしょう。

ステータスコードやステータステキストによって分岐を入れている人には尚更やっかいですね。

POSTも一緒?

はい、今までGETについてしか触れてきませんでしたが、POSTも一緒です。
$axios.postと$axios.$postはレスポンス内容が異なっているので、GETの時同様に注意し、上手く使い分けましょう。