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](https://flaviocopes.com/nodejs/) 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

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:

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

Best Vue.js Rich-Text Editor Ever tiptap