Axios request intercepted by interceptor not falling in catch block from initial request if error is Promise.rejected in interceptor

huangapple go评论60阅读模式
英文:

Axios request intercepted by interceptor not falling in catch block from initial request if error is Promise.rejected in interceptor

问题

I'm trying to handle some request errors using axios interceptors to better provide messages to the catch block which displays a toast in my application. But no matter what article, tutorial, video, or documentation I see they use return Promise.reject(error) to return the error in the interceptor. That does not work in my case, I'm working on react native project, so I thought it could be a problem of framework, but I managed to reproduce it on Code Sandbox.

CodeSandbox Working Example:
https://codesandbox.io/s/pedantic-antonelli-s4iih0?file=/src/services/api.ts:85-86

This is the Axios interceptors documentation https://axios-http.com/docs/interceptors

Axios request intercepted by interceptor not falling in catch block from initial request if error is Promise.rejected in interceptor

And here is my interceptor:

import axios from "axios";

import { AppError } from "../utils";

function errorHandler(requestError: unknown) {
  if (axios.isAxiosError(requestError)) {
    console.log("gets to the interceptor");
    if (requestError.response && requestError.response.data) {
      switch (requestError.response.status) {
        case 400:
          return Promise.reject(requestError);

        case 401: {
          return Promise.reject(new AppError("Failed to authenticate token."));
        }

        case 404:
          if (requestError.response.config.url?.includes("api")) {
            // return Promise.reject(new AppError('Email or password invalid'));
            throw a new AppError("Email ou senha inválidos.");
          }

          return Promise.reject(requestError);

        default:
          return Promise.reject(requestError);
      }
    }
    return Promise.reject(requestError);
  }
  return Promise.reject(requestError);
}

export const api = axios.create();

api.interceptors.response.use(
  (response) => {
    return response;
  },
  (requestError) => {
    errorHandler(requestError);
  }
);

Here is my request function:

  const handleSubmit2 = async () => {
    try {
      console.log("submit start 2");
      const data = await api.post("/api/not-movies-again", {
        email: "wow@email.com",
        password: "wow password"
      });
      console.log("REQUEST DATA 2: ", data);
    } catch (error) {
      console.log("Catcher ERROR 2: ", error);
    } finally {
      console.log("submit end 2");
    }
  };

Not a single return Promise.reject(error) falls in the catch block. It turns out after hours hitting my head on this, I had the idea of throwing the error itself instead of rejecting it and it actually worked, the error fall in the catch block.

I could just be really dumb, but am I doing anything crazy wrong here? Am I hitting an edge case by simply handling my errors? Or is the documentation and every tutorial outdated?

英文:

I'm trying to handle some request errors using axios interceptors to better provide messages to the catch block which displays a toast in my application. But no matter what article, tutorial, video, or documentation I see they use return Promise.reject(error) to return the error in the interceptor. That does not work in my case, I'm working on react native project, so I thought it could be a problem of framework, but I managed to reproduce it on Code Sandbox.

CodeSandbox Working Example:
https://codesandbox.io/s/pedantic-antonelli-s4iih0?file=/src/services/api.ts:85-86

This is the Axios interceptors documentation https://axios-http.com/docs/interceptors

Axios request intercepted by interceptor not falling in catch block from initial request if error is Promise.rejected in interceptor

And here is my interceptor:

import axios from "axios";

import { AppError } from "../utils";

function errorHandler(requestError: unknown) {
  if (axios.isAxiosError(requestError)) {
    console.log("gets to the interceptor");
    if (requestError.response && requestError.response.data) {
      switch (requestError.response.status) {
        case 400:
          return Promise.reject(requestError);

        case 401: {
          return Promise.reject(new AppError("Failed to authenticate token."));
        }

        case 404:
          if (requestError.response.config.url?.includes("api")) {
            // return Promise.reject(new AppError('Email or password invalid'));
            throw new AppError("Email ou senha inválidos.");
          }

          return Promise.reject(requestError);

        default:
          return Promise.reject(requestError);
      }
    }
    return Promise.reject(requestError);
  }
  return Promise.reject(requestError);
}

export const api = axios.create();

api.interceptors.response.use(
  (response) => {
    return response;
  },
  (requestError) => {
    errorHandler(requestError);
  }
);

Here is my request function:

  const handleSubmit2 = async () => {
    try {
      console.log("submit start 2");
      const data = await api.post("/api/not-movies-again", {
        email: "wow@email.com",
        password: "wow password"
      });
      console.log("REQUEST DATA 2: ", data);
    } catch (error) {
      console.log("Catcher ERROR 2: ", error);
    } finally {
      console.log("submit end 2");
    }
  };

Not a single return Promise.reject(error) falls in the catch block. It turns out after hours hitting my head on this, I had the idea of throwing the error itself instead of rejecting it and it actually worked, the error fall in the catch block.

I could just be really dumb, but am I doing anything crazy wrong here? Am I hitting an edge case by simply handling my errors? Or is the documentation and every tutorial outdated?

答案1

得分: 1

我觉得你只是忘了一个return:

api.interceptors.response.use(
(response) => {
return response;
},
(requestError) => {
// 这里可能需要一个返回
return errorHandler(requestError);
}
);
英文:

I think you just forgot a return there:

api.interceptors.response.use(
(response) => {
return response;
},
(requestError) => {
// Here probably need to have a return
return errorHandler(requestError);
}
);

huangapple
  • 本文由 发表于 2023年5月7日 07:19:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76191596.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定