axios ~サーバーにHTTP通信をする~

Vue.js

インストール

$ yarn add axios

基本的な使い方

  • postリクエスト axios.postの第一引数にエンドポイントURL、第二引数に送信するオブジェクトを渡す。
  • getリクエスト axios.getの引数にエンドポイントURLを渡す。thenでレスポンスを取得する。
 // axiosをインポート
import axios from 'axios'  
 
export default {
    methods: {
        // postリクエスト
        createComment() {
            axios.post('エンドポイントのURL', {
                  送信するデータ
            })
            .then(res => {　 // 成功したときの処理
                  console.log(res)
            })
            .catch(err => {　// 失敗したときの処理
                  console.error(err)
            })
        },
        // patch, deleteリクエストも同様の書き方

        // getリクエスト
        fetchComment() {
            axios.get('サーバーのURL'
            )
            .then(res => {　 // 成功したときの処理　resが受信するデータ
                  this.task = res.data;
            })
            .catch(err => {　// 失敗したときの処理
                  console.error(err);
            })
        }
    }
}

すべてのリクエストに共通の設定を行う

設定ファイル（plugins/axios.js）でaxios.createでaxiosインスタンスを生成し、共通の設定を行う

// axiosインスタンスの生成例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

設定例

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'api'   // すべてのリクエスト先が'api/xxx'になる
})

// 特定条件での設定
// インスタンス生成後に設定を追加する
if (localStorage.token) {
  axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.token}`
}
export default axiosInstance

設定ファイルの読み込み

import axios from '../plugins/axios.js'

export default {
     ...
            axios.post( ...