Axios handling errors

Question

I m trying to understand javascript promises better with Axios  What I pretend is to handle all errors in Request js and only call the request function from anywhere without having to use catch     In this example  the response to the request will be 400 with an error message in JSON   This is the error I m getting   Uncaught  in promise  Error  Request failed with status code 400  The only solution I find is to add  catch      gt      in Somewhere js but I m trying to avoid having to do that  Is it possible   Here s the code      Request js   export function request method  uri  body  headers      let config         method  method toLowerCase        url  uri      baseURL  API URL      headers     Authorization    Bearer     getToken          validateStatus  function  status          return status  gt   200  amp  amp  status  lt  400                     return axios config  then      function  response          return response data           catch      function  error          console log  Show error notification          return Promise reject error                   Somewhere js   export default class Somewhere extends React Component             callSomeRequest         request  DELETE     some request   then             gt            console log  Request successful

User · Answer

if u wanna use async await try   export const post   async   link data     gt    const option         method   post       url     URL   link        validateStatus  function  status            return status  gt   200  amp  amp  status  lt  300     default              data     try       const response   await axios option     catch  error        const   response     error      const   request     errorObject     response     take everything but  request      console log errorObject

User · Answer

call the request function from anywhere without having to use catch      First  while handling most errors in one place is a good Idea  it s not that easy with requests  Some errors  e g  400 validation errors like   username taken  or  invalid email   should be passed on   So we now use a Promise based function   const baseRequest   async  method  string  url  string  data         gt    new Promise lt   data  any   gt   resolve  reject    gt        const requestConfig  any           method        data        timeout  10000        url        headers                  try         const response   await axios requestConfig            Request Succeeded        resolve response         catch  error             Request Failed         if  error response               Request made and server responded         reject response           else if  error request               The request was made but no response was received         reject response           else              Something happened in setting up the request that triggered an Error         reject response                        you can then use the request like  try     response   await baseRequest  GET    https   myApi com path to endpoint     catch  error         either handle errors or don t

User · Answer

If I understand correctly you want then of the request function to be called only if request is successful  and you want to ignore errors  To do that you can create a new promise resolve it when axios request is successful and never reject it in case of failure  Updated code would look something like this  export function request method  uri  body  headers      let config         method  method toLowerCase        url  uri      baseURL  API URL      headers     Authorization    Bearer     getToken          validateStatus  function  status          return status  gt   200  amp  amp  status  lt  400               return new Promise function resolve  reject        axios config  then        function  response            resolve response data                catch        function  error            console log  Show error notification

User · Answer

Actually  it s not possible with axios as of now  The status codes which falls in the range of 2xx only  can be caught in  then     A conventional approach is to catch errors in the catch   block like below   axios get   api xyz abcd      catch function  error        if  error response             Request made and server responded       console log error response data         console log error response status         console log error response headers         else if  error request             The request was made but no response was received       console log error request         else            Something happened in setting up the request that triggered an Error       console log  Error   error message                  Another approach can be intercepting requests or responses before they are handled by then or catch   axios interceptors request use function  config           Do something before request is sent     return config       function  error           Do something with request error     return Promise reject error             Add a response interceptor axios interceptors response use function  response           Do something with response data     return response       function  error           Do something with response error     return Promise reject error

User · Answer

You can go like this  error response data  In my case  I got error property from backend  So  I used error response data error  My code  axios    get    API BASE URL  students      then response   gt         return response data         then data   gt         console log data          catch error   gt         console log error response data error

User · Answer

If you want to gain access to the whole the error body  do it as shown below       async function login reqBody      try       let res   await Axios         method   post         url   https   myApi com path to endpoint         data  reqBody              let data   res data      return data      catch  error        console log error response      this is the main part  Use the response property from the error object      return error response

User · Answer

I tried using the try  catch   method but it did not work for me  However  when I switched to using  then      catch       the AxiosError is caught correctly that I can play around with  When I try the former when putting a breakpoint  it does not allow me to see the AxiosError and instead  says to me that the caught error is undefined  which is also what eventually gets displayed in the UI  Not sure why this happens I find it very trivial  Either way due to this  I suggest using the conventional  then      catch      method mentioned above to avoid throwing undefined errors to the user

[javascript] Axios handling errors

Examples related to javascript

Examples related to promise

Examples related to axios