Getting started with Axios

Learn how to use axios in your projects

Posted by aquasar on June 21st, 2018

What is Axios?

Why axios? Axios is a light weight library that makes it easy to fetch data or send requests to a server. It is an alternative to using jQuery, XHR or fetch to write ajax related javascript.

What is ajax? In a nutshell, ajax is a methodology which allows you to request and send data from a web server, in the background, without reloading the page.

Why should I use Axios?

You should use axios if you are planning to use APIs or build single page apps with modern frameworks like react. Axios is a popular tool for many developers that use AJAX to build fast and dynamic web pages and web apps.

Advantages of using axios vs other methods

Axios vs Fetch: Fetch does not have support on all web browsers, only modern ones. Error handling is also better with axios. Finally, you dont need to pass .json() to get the data after sending the response to the server unlike with fetch.

Axios vs jQuery: If you are using the entire jQuery library simply for using jQuery's ajax method, than that is a lot extra functionality and weight you simply don't need. In that case, Axios is a much smaller library and therefore a better choice.

Axios vs XHR: XHR stands for XmlHttpRequests. Syntax is a lot nicer with Axios and it allows you to writer cleaner and shorter code.

How to get Axios?

You can get the CDN for axios here or if you prefer download via npm

Simple Axios Example

In this example we use JSON placeholder, a fake online REST API used for testing and demo purposes. An async is used because we are going to need to use await to wait for the data request to be returned. This gets stored in the res variable.

   
    async function getResults(){
      try{
        const res = await axios(`https://jsonplaceholder.typicode.com/todos/1`);
        console.log(res);
      }
      catch(err){
          console.log(err);
      }
  
      }
    getResults();
          

Try/Catch is used for error handling. If successful, the data is returned and logged to the console. You can see what happens in the catch statement by mistyping the url above.

Another Example of using Axios.

In this example, we are going to use axios to get data from the food to fork API. We will need to use an API key, which you can get on their website and a proxy to prevent a no access control allow origin error. You can read more about that here if you like.

                   
    async function getResults(query){
      const key = 'Your API';
      const proxy = 'https://cors-anywhere.herokuapp.com/';
      try{
        const res = await axios(`${proxy}http://food2fork.com/api/search?key=${key}&q=${query}`);
        console.log(res);
      }
      catch(err){
          console.log(err);
      }
  
    }

    getResults('tacos');
                
              

In this example, getResults is called with the search query `taco` and the data from the search query is stored in the res variable.

Hope you enjoyed this article. For questions, commments and feedback please drop me a line at: admin@dash-intel.com

Photo credit Free-photos on Pixabay.