Nuxt における axios のメソッドには3種類ある

Nuxt の axios には二つある

axios と $axios

axios からインポートする場合、axios

code:ts

import axios from 'axios'

Nuxt のコンテキストから参照すると、$axios

code:ts

// Composition API 以前

this.$axios

// Composition API 以後

import { useContext } from '@nuxtjs/composition-api'

export default {

setup() {

const { $axios } = useContext()

}

axios と $axios の違い

$axios では get() などの他に $get() などのメソッドが使える

get と $get との違い

get では data の他に headers や status などが返る

$get では data のみ返ってくる

フェッチの際に一旦 response を取って response.data で返す手間がなくなる

async / await もフェッチャ内ではいらなくなる

code:ts

// get

const fetcher1 = async (): Promise<AxiosResponse<IData>> => {

const { data } = await $axios.get('http://example.com')

return data

}

// $get

const fetcher2 = (): Promise<IData> => {

return await $axios.$get('http://example.com')

}

Q. status でエラーハンドリングしたい時とかはどうするの

try / catch (err) した err の中身は通常通りのレスポンスなので、そこは問題ない

まとめ

table:axios とメソッドとの関係

メソッドレスポンス返り値の型

axios get() data, config, headers, request, status, statusText Promise<AxiosResponse<any>>

$axios get() data, config, headers, request, status, statusText Promise<AxiosResponse<any>>

$axios $get() dataのみ Promise<any>