# Nuxtjs axios リクエストのヘッダー設定

Nuxtjs の i18n 使って、API 送信する際の header にAccept-Language設定して指定言語のレスポンスを作っています。
switchLocalePath('en')で言語切り替える際に axios header に設定するタイミングがズレる時があるので、修正しました。

間違った設定方法: mountedに$axios.setHeader 使う

mounted() {
    this.$axios.setHeader('Accept-Language', this.$i18n.locale)
}

# mounted に設定してはいけない原因

mounted()フックは、コンポーネントが DOM にマウントされた後に実行されます。このため、mounted()フックで$axios のヘッダーを設定すると、コンポーネントがレンダリングされてからヘッダーが設定されることになります。
mounted フックで $axios のヘッダーを設定することは、一般的に問題ありませんが、DOM 更新のタイミングによってリクエスト header が変わらないことがあります。

DOM 更新

DOM の更新はブラウザが処理するため、ブラウザの実装に依存します。一部のブラウザでは、非同期的に DOM が更新される場合があります。そのため、mounted フック内で DOM が更新されることを前提にしたコードを記述する場合、ブラウザの挙動を考慮する必要があります。

# plugin で対応

対応方法としては、プラグインを使って、axios が初期化され際にインジェクトでリクエストヘッダーを動的に変更します。

nuxt.config.js ファイルで、プラグインを設定

// nuxt.config.js
export default {
  plugins: ["~/plugins/axios"],
};

plugins ディレクトリに axios.js などの名前で新しいファイルを作成して axios リクエストをカスタマイズします。

// plugins/axios.js
export default function ({ $axios, app,redirect }) {
  $axios.onRequest((config) => {
    config.headers['Accept-Language'] = app.i18n.locale
    return config
  })
}


  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status);
    if (code === 400) {
      redirect("/400");
    }
  });
}

これでアプリケーションが初期化されるときにコンポーネントがマウントされる前に axios のヘッダーが設定されます。

# $axios メソッド

$axios インスタンスには onRequest 以外にも、onResponse onError onRequestError onResponseError などさまざまなイベントを処理するためのメソッドがあります。

# onRequest(config)

リクエストが送信される前に実行されます。config オブジェクトは、リクエストに関する設定を含みます。このメソッドでは、リクエストの変更や追加の設定を行うことができます。

export default function ({ $axios }) {
  $axios.onRequest((config) => {
    console.log("Making request to " + config.url);
  });
}

# onResponse(response)

リクエストが成功した後に実行されます。response オブジェクトは、サーバーからのレスポンスを含みます。このメソッドでは、レスポンスの処理や変更を行うことができます。

export default function ({ $axios }) {
  $axios.onResponse((response) => {
    console.log("Response status: " + response.status);
    return response;
  });
}

# onError(error)

リクエストが失敗した場合に実行されます。error オブジェクトは、エラーの詳細を含みます。このメソッドでは、エラーの処理やログの記録などを行うことができます。

export default function ({ $axios }) {
  $axios.onError((error) => {
    console.error("Request error:", error);
    return Promise.reject(error);
  });
}

# onRequestError(error)

リクエストが送信される前にエラーが発生した場合に実行されます。主にネットワークエラーやリクエストの構築時のエラーなど、リクエストの前処理中に発生したエラーを処理します。

export default function ({ $axios }) {
  $axios.onRequestError((error) => {
    console.error("Request error:", error);
    // リクエストが失敗した場合に何らかの処理を行う
  });
}

# onResponseError(error)

レスポンスの処理中にエラーが発生した場合に実行されます。主にサーバーからのエラーレスポンスの処理中に発生したエラーを処理します。

export default function ({ $axios }) {
  $axios.onResponseError((error) => {
    console.error("Response error:", error);
    // レスポンスがエラーだった場合に何らかの処理を行う
  });
}

# 新しい axios インスタンス作成

あまり使うことありませんが、新しい axios インスタンス作成方法

export default function ({ $axios }, inject) {
  const api = $axios.create({
    headers: {
      common: {
        Accept: "text/plain, */*",
      },
    },
  });

  api.setBaseURL("https://api.hapicode.com");

  inject("api", api);
}