Axios - HTTP GET Request Examples

Below is a quick set of examples to show how to send HTTP GET requests to an API using the axios HTTP client which is available on npm.

Other HTTP examples available:

• Axios: POST, PUT, DELETE
• Fetch: GET, POST, PUT, DELETE
• React + Axios: GET, POST, PUT, DELETE
• React + Fetch: GET, POST, PUT, DELETE
• Vue + Axios: GET, POST
• Vue + Fetch: GET, POST, PUT, DELETE
• Angular: GET, POST, PUT, DELETE
• Blazor WebAssembly: GET, POST

Installing axios from npm

With the npm CLI: npm install axios

With the yarn CLI: yarn add axios

Simple GET request using axios

This sends an HTTP GET request to the npm api to search for all axios packages using the query q=axios, then writes the total from the response to the #get-request .result element so it's displayed on the page.

// Simple GET request using axios
const element = document.querySelector('#get-request .result');
axios.get('https://api.npms.io/v2/search?q=axios')
    .then(response => element.innerHTML = response.data.total);

Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request.js

GET request using axios with async/await

This sends the same GET request with axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

(async () => {
    // GET request using axios with async/await
    const element = document.querySelector('#get-request-async-await .result');
    const response = await axios.get('https://api.npms.io/v2/search?q=axios');
    element.innerHTML = response.data.total;
})();

Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request-async-await.js

GET request using axios with error handling

This sends a GET request with axios to an invalid url on the npm api then writes the error message to the parent of the #get-request-error-handling .result element and logs the error to the console.

// GET request using axios with error handling
const element = document.querySelector('#get-request-error-handling .result');
axios.get('https://api.npms.io/v2/invalid-url')
    .then(response => element.innerHTML = response.data.total)
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error.message}`;
        console.error('There was an error!', error);
    });

Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request-error-handling.js

GET request using axios with set HTTP headers

This sends the same GET request again using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header.

// GET request using axios with set headers
const element = document.querySelector('#get-request-set-headers .result');
const headers = {
    'Authorization': 'Bearer my-token',
    'My-Custom-Header': 'foobar'
};
axios.get('https://api.npms.io/v2/search?q=axios', { headers })
    .then(response => element.innerHTML = response.data.total);

Example Axios GET request at https://stackblitz.com/edit/axios-http-get-request-examples?file=get-request-set-headers.js