• Home
  • Privacy Policy
  • About Us
  • Contact Us
  • sitemap

ITProSpt

Share useful informations about IT

  • Windows
  • Active Directory
  • Chrome
  • Office
  • Outlook
  • Mobile
  • ↻ More
    • Gaming
    • VLC
    • Software
    • Gmail
    • Login Portals
    • QA
    • Education

Tips On Dealing With Errors In Axios

March 16, 2022 by thepros

Axios is one of the most popular libraries when it comes to the making of HTTP requests. It’s a great library, but it’s not perfect. In this blog, we take a look at some of the errors that can occur when using this library and how to deal with them.

How To Deal With Errors In Axios?

A common solution to deal with errors in Axios is to capture errors in the catch() block, as seen below. Intercepting requests or answers before their being treated by then or catch.

Option 1

A common way is to capture errors in the catch() block, as seen 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);
    }
 
  });

Option 2

Intercepting requests or answers prior to their being treated 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);
  });

Option 3

If you would like to acquire access to the entire error body, follow the steps 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;
  }
 
}

Option 4

You may use the following syntax: error.response.data. For exampple, the backend returned an error property. As a result, you should use error.response.data.error. The code is:

axios
  .get(`${API_BASE_URL}/students`)
  .then(response => {
     return response.data
  })
  .then(data => {
     console.log(data)
  })
  .catch(error => {
     console.log(error.response.data.error)
  })

Conclusion

We hope you enjoyed our article about dealing with errors in Axios. We are confident that with this information, you will be able to make the most of your Axios development experience. 

If you still have any further concerns or problems, please feel free to leave us a comment. Thank you for reading; please make sure to share this helpful article with others!

Post Views: 136

Related Posts:

  • The easy way to handle “Jasmine.createSpyObj with properties”
    The easy way to handle “Jasmine.createSpyObj with…
  • Two ways to fix Typescript error “Object is possibly undefined”
    Two ways to fix Typescript error “Object is possibly…
  • Tips On Fixing The Error “zsh: command not found: jest”
    Tips On Fixing The Error “zsh: command not found: jest”
  • Tricks To Solve URL scheme must be “http” or “https” for CORS request
    Tricks To Solve URL scheme must be “http” or “https” for…
  • How to solve “Unhandled Rejection (TypeError): e.preventDefault is not a function”
    How to solve “Unhandled Rejection (TypeError):…
  • Tips On Fixing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory in ionic 3
    Tips On Fixing FATAL ERROR: Ineffective mark-compacts near…
  • How to fix "SyntaxError: Unexpected reserved word" for await loop
    How to fix "SyntaxError: Unexpected reserved word" for await…
  • Tips On Fixing The Error “DevTools failed to load SourceMap: Could not load content for chrome-extension”
    Tips On Fixing The Error “DevTools failed to load SourceMap:…

Filed Under: Javascript

Recent Posts

  • Top Ways To Create A User-Friendly Online Property Search For Your Real Estate Clients
  • List Education Websites for Students, providing a variety of materials and completely free
  • Simple solution to correct the requests.exceptions.ConnectionError: (‘Connection aborted.’ RemoteDisconnected(‘Remote end closed connection without response’)) issue 

Categories

Copyright © 2022 · Itprospt.com