axiosの効率よき設定方法

執筆日: 2021-10-31

概要

axiosはブラウザとnode.jsにてhttp通信を提供しているモジュールです。

axiosを使用する際、ヘッダーに情報を記述することはよくあることです。
その際、一つ一つに律儀に書いていく処理は無駄な記述だと考えています。

一括で全体に共通して設定を適応する方法を紹介します。

interceptors

interceptorsを使用すれば、リクエスト設定やレスポンス後のデータ整形などが可能になります。

リクエスト前の設定

ヘッダーにトークン情報を記載する時、以下のようにします。

import axios from 'axios'

const token = 'joijeAw932'

axios.interceptors.request.use(config => {
  config.headers = {
    Authorization: `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

レスポンス後のデータ整形

データを取得したあとに、整形して返すことができます。

import axios from 'axios'

axios.interceptors.response.use(response => {
  // データを取得
  const { data } = response
  // ここで整形する
  const formattedData = data
  return formattedData
}, error => {
  return Promise.reject(error)
})

結論

チーム開発では特にまとめた設定をしておかないとバグの温床になりかねません。
アプリ開発にてよく使用するモジュールなので、共通化は必須と言えるでしょうか。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

SNS

SNSも積極的に配信しています。
よければフォローお願いします!

© 2021 天然珈琲店