You are currently viewing AxiosでHTTPステータスに応じた処理を実行する

AxiosでHTTPステータスに応じた処理を実行する

今作成している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ステータスを返却するように処理を作り込んでいこうと思います。

コメントを残す