Axios 拦截器和 Try/Catch 错误处理

Question

In my React Native app, I handle each call to the api within a try/catch block and am also using axios interceptors to handle the errors that I get from the server.

The problem is that using both of them seems redundant since I'm already handling the errors with axios interceptors and have no need of the catch block. Yet removing the try/catch blocks result in an UnhandledPromiseRejectionWarning .

try/catch for api calls: ( WILL REMOVE THE CONSOLE.LOG )

// Request to the server
const handleSubmit = async () => {
  try {
    const response = await axis.post('API_URL',{BODY});
    return response.data
  } catch (error) {
    console.log(error);
  }
};

axios interceptors :

// Intercept on response
axios.interceptors.response.use(
  res => {
    return res;
  },
  err => {
    // Error handling logic
    // ....................

    return Promise.reject(err);
  },
);

Is there any way I can keep using try/catch in my functions and still handle the errors with axios interceptors or just use axios interceptors and avoid the UnhandledPromiseRejectionWarning ?

Answer 1

You might have already figured this out, but I'll try to give some input.

If you do as you have return Promise.reject(err) then the err object will be sent to your catch method. If no catch is present the error will be thrown to the console.

If you instead just use return err or any other value, that value will be returned to the then or await method/variable.

Hope this helps.