Axios

What is it ? §

Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.

• Make XMLHttpRequests from the browser
• Make http requests from node.js
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Cancel requests
• Timeouts
• Query parameters serialization with support for nested entries
• Automatic request body serialization to:
  • JSON (application/json)
  • Multipart / FormData (multipart/form-data)
  • URL encoded form (application/x-www-form-urlencoded)
• Posting HTML forms as JSON
• Automatic JSON data handling in response
• Progress capturing for browsers and node.js with extra info (speed rate, remaining time)
• Setting bandwidth limits for node.js
• Compatible with spec-compliant FormData and Blob (including node.js)
• Client side support for protecting against XSRF

Performing Requests §

Performing Get Request §

Performing a GET request

 
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
 
// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  
 

Using Async an await to make a get requeest

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Post Request §

How to perform POST requests with Axios

Performing a POST request §

JSON §

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

info Performing multiple concurrent requests

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
 
const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);
 
// OR
 
Promise.all([getUserAccount(), getUserPermissions()])
  .then(function ([acct, perm]) {
    // ...
  });

Post an HTML form as JSON

const {data} = await axios.post('/user',
		document.querySelector('#my-form'), {
		headers: {
		    'Content-Type': 'application/json'
		  }
})

Forms §

Multipart ( multipart/form-data)

const {data} = await axios.post('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3],
    photo: document.querySelector('#fileInput').files
  }, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
)

URL encoded form ( application/x-www-form-urlencoded)

const {data} = await axios.post('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3]
  }, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
})

The Axios API Reference

Requests can be made by passing the relevant config to axios.

axios(config) §

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// GET request for remote image in node.js
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios(url[, config]) §

// Send a GET request (default method)
axios('/user/12345');

Request method aliases §

For convenience aliases have been provided for all supported request methods.

axios.request(config) §

axios.get(url[, config]) §

axios.delete(url[, config]) §

axios.head(url[, config]) §

axios.options(url[, config]) §

axios.post(url[, data[, config]]) §

axios.put(url[, data[, config]]) §

axios.patch(url[, data[, config]]) §

axios.postForm(url[, data[, config]]) §

axios.putForm(url[, data[, config]]) §

axios.patchForm(url[, data[, config]]) §

NOTE §

When using the alias methods url, method, and data properties don’t need to be specified in config.