How to Use Axios as Your HTTP Client

How to Use Axios as Your HTTP Client
Axios is a very popular JavaScript library you can use to perform HTTP requests. It works in both Browser and [Node.js]( platforms.

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


Axios can be installed using npm:

npm install axios

or yarn:

yarn add axios

or simply include it in your page using

<script src=""></script>

The Axios API

You can start an HTTP request from the axios object:

  url: '',
  method: 'get',
  data: {
    foo: 'bar'

but for convenience, you will generally use

  • axios.get()

(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('')
  } catch (error) {

const countBreeds = async () => {
  const breeds = await getBreeds()

  if ( {
    console.log(`Got ${Object.entries(} breeds`)


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('')
  } catch (error) {

const countBreeds = async () => {
  const breeds = getBreeds()
    .then(response => {
      if ( {
          `Got ${Object.entries(} breeds`
    .catch(error => {


Add parameters to GET requests

A GET response can contain parameters in the URL, like this: [](

With Axios you can perform this by simply using that URL:


or you can use a params property in the options:

axios.get('', {
  params: {
    foo: 'bar'

POST Requests

Performing a POST request is just like doing a GET request, but instead of axios.get, you use'')

An object containing the POST parameters is the second argument:'', { 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

Vue.js 2 Essentials: Build Your First Vue App


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

Create Shopping basket page With Vuejs and Nodejs

Learn Vue 2 in 65 Minutes -The Vue Tutorial for 2018