Photo by Mercey eric on Unsplash

So I’m very excited to announce that in my recent project I used Axios for the first time!

I decided to make a small write-up about it so others could share my experience.

Installation

npm install axios

In the browser, you can include it in your page using unpkg.com:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Remembering that API calls must enable CORS to be accessed inside the browser, otherwise the request will fail.

The Axios API

axios({
url: 'https://dolphins.ceo/api/breeds/list/all',
method: 'get'
})

This returns a promise. You can use async/await to resolve that promise to the response object:

;(async () => {
const response = await axios({
url: 'https://dolphins.ceo/api/breeds/list/all',
method: 'get'
})
console.log(response)
})()

For convenience, you will generally use the methods

  • axios.get()
  • axios.post()

In JQuery you would use $.get() and $.post() instead of $.ajax()

For a simpler syntax you can use for example:

;(async () => {
const response = await axios.get('https://dolphins.ceo/api/breeds/list/all')
console.log(response)
})()

Axios offers methods for all the HTTP verbs, which are less popular but still used:

  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

and a method to get the HTTP headers of a request, discarding the body,axios.head().

GET requests

const axios = require('axios')const getBreeds = async () => {
try {
return await axios.get('https://dolphins.ceo/api/breeds/list/all')
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = await getBreeds()
if (breeds.data.message) {
console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)
}
}
countBreeds()

If you don’t want to use async/await you can use the Promises syntax:

const axios = require('axios')const getBreeds = () => {
try {
return axios.get('https://dolphins.ceo/api/breeds/list/all')
} catch (error) {
console.error(error)
}
}
const countBreeds = async () => {
const breeds = getBreeds()
.then(response => {
if (response.data.message) {
console.log(
`Got ${Object.entries(response.data.message).length} breeds`
)
}
})
.catch(error => {
console.log(error)
})
}
countBreeds()

Add parameters to GET requests

With Axios you can perform this by using that URL:

axios.get('https://site.com/?name=[your name]')

or you can use theparams property in the options:

axios.get('https://site.com/', {
params: {
name: '[your name]'
}
})

POST Requests

axios.post('https://site.com/')

An object containing the POST parameters is the second argument:

axios.post('https://site.com/', {
name: '[your name]'
})

Passionate Programmer. Independent Thinker. Caring Father. Graduate of Flatiron Bootcamp for Software Development. Currently seeking new opportunities.