今作成しているWebアプリで、エラーが発生したときにHTTPステータスを利用してエラーを示すように作成しています。
AxiosはデフォルトでHTTPステータスが200以外の場合、例外を出力して終了するようなので、インターセプターを利用して独自の処理を利用できるようにします。
早速ですが、コードです
// Axiosインスタンスを作成
const apiClient = axios.create({
withCredentials: true, // クッキーを含める設定
});
// レスポンスインターセプターを設定
apiClient.interceptors.response.use(
(response) => {
// 成功時の処理
return response;
},
(error) => {
if (error.response && error.response.status === 401) {
// 401エラー時の独自の処理
console.error('認証に失敗');
}
return Promise.reject(error);
}
);
// APIを実行
apiClient
.post(registerURL, registerParam)
.then((response) => {
console.log('認証に成功');
});
apiClient.interceptors.response.useを利用してHTTPステータスに対応した独自の処理を作成できます。
上記の例では401ステータスが返却された場合の処理が定義されています。
今作成しているアプリでは、ログインの認証に失敗すると401エラーが返却されるので、その場合は「ログインID,パスワードが違います」といったようなエラーメッセージを設定するような処理を行っています。
以上
短いですが、AxiosでHTTPステータスに応じた処理を実行する方法を記載しました。
HTTPステータスは色々種類があるため、エラーの状況に応じて適切なHTTPステータスを返却するように処理を作り込んでいこうと思います。
created by Rinker
¥906
(2024/10/27 13:26:23時点 楽天市場調べ-詳細)
created by Rinker
¥2,860
(2024/10/27 13:27:04時点 楽天市場調べ-詳細)