baseURL

Axiosで通信を行うURLのbaseパスを定義することができる

axios.defaults.baseURL に通信をしたいurlを定義する

import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_FIREBASE_URL;

axiosのhttpメソッドで通信を行う際はbaseパス以降のパスを指定するだけで良い

axios.get(
        '/comments',
    )
    .then(response => {
       this.comments = response.data.documents;
    })
    .catch(error => {
      console.log(error);
    });

Interceptor

request

リクエストをサーバーに送る前に行う処理

configにはAxiosRequestConfig インターフェースで定義されているプロパティにアクセスできる

errorは通信に失敗した場合の処理を記述できる

注意としてerrorでreturnしたデータはthenに渡されてしまうためPromise.reject(error) を行いcatchに渡すようにする必要がある

axios.interceptors.request.use(
    config => {
      return config
    },
    error => {
      return Promise.reject(error)
    }
)

response

サーバーからデータを取得しthenやcatchに渡す前に行う処理

response にはAxiosResponse インターフェースのプロパティにアクセスできる

axios.interceptors.response.use(
   response => {
        return response
    },
    error => {
        returnPromise.reject(error)
    }
)

利用シーンとしてはリクエストヘッダーに認証情報を付与したり、エラーが発生した際にフラッシュメッセージを表示するなどの全てのaxios requestやresponseに共通して行いたい処理を記述する

eject

axios.interceptors.use() の処理を行いたくない場合は、ejectメソッドを使用する