# 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);
}
参考