How to Use Axios as Your HTTP Client
Is supports all modern browsers, including IE8 and higher.
It is promise-based, and this lets us write async/await code to perform XHR requests very easily.
Using Axios has quite a few advantages over the native Fetch API:
- supports older browsers (Fetch needs a polyfill)
- has a way to abort a request
- has a way to set a response timeout
- has built-in CSRF protection
- supports upload progress
- performs automatic JSON data transformation
- works in Node.js
Installation
Axios can be installed using npm:
npm install axios
or yarn:
yarn add axios
or simply include it in your page using unpkg.com:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
The Axios API
You can start an HTTP request from the axios object:
axios({
url: 'https://dog.ceo/api/breeds/list/all',
method: 'get',
data: {
foo: 'bar'
}
})
but for convenience, you will generally use
axios.get()axios.post()
(like in jQuery, you would use $.get() and $.post() instead of $.ajax())
Axios offers methods for all the HTTP verbs, which are less popular but still used:
axios.delete()axios.put()axios.patch()axios.options()
It also offers a method to get the HTTP headers of a request, discarding the body.
GET requests
One convenient way to use Axios is to use the modern (ES2017) async/await syntax.
This Node.js example queries the Dog API to retrieve a list of all the dog breeds, using axios.get(), and it counts them:
const axios = require('axios')
const getBreeds = async () => {
try {
return await axios.get('https://dog.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://dog.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
A GET response can contain parameters in the URL, like this: [https://site.com/?foo=bar](https://site.com/?foo=bar.).
With Axios you can perform this by simply using that URL:
axios.get('https://site.com/?foo=bar')
or you can use a params property in the options:
axios.get('https://site.com/', {
params: {
foo: 'bar'
}
})
POST Requests
Performing a POST request is just like doing a GET request, but instead of axios.get, you use axios.post:
axios.post('https://site.com/')
An object containing the POST parameters is the second argument:
axios.post('https://site.com/', { foo: 'bar' })
Learn Vue.js with me! 👱🏼
I’m going to learn Vue.js full-time for 2 months, and I’ll create a resource for you to learn it quickly as well, with tutorials and projects, working examples and screencasts.
Thanks for reading, and good luck!
Source viva : How to Use Axios as Your HTTP Client
30s ad
Horizontal Feed Component with Sass and VueJs 2
☞ http://bit.ly/2HE1L1v
Vue.js 2 Essentials: Build Your First Vue App
☞ http://bit.ly/2JK8szB
Suggest:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Vue.js Tutorial: Zero to Sixty
☞ Learn Vue.js from Scratch - Full Course for Beginners