Vuejs sending HTTP/Ajax request with axios


axios is the only best promise based HTTP client for JavaScript

axios is one of the most famous JS package available on github. It is a promise based HTTP client for javascript. It can used both on frontend or backend(node.js).

<u>Features of axios</u>:

  • 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
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

axios examples

Example to make http get request with javascript:

// Make a request for a user with a given ID
  .then(function (response) {
    // handle success
  .catch(function (error) {
    // handle error
  .then(function () {
    // always executed

Example to make http post request with javascript:

  .post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone',
  .then(function (response) {
  .catch(function (error) {

axios available methods

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])
  •[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

axios dealing with errors

There are times when we might not get the data we need from the API. There are several reasons that our axios call might fail, including but not limited to:

  • The API is down.
  • The request was made incorrectly.
  • The API isn’t giving us the information in the format that we anticipated.

When making this request, we should be checking for just such circumstances, and giving ourselves information in every case so we know how to handle the problem. In an axios call, we’ll do so by using catch.

  .then((response) => ( =
  .catch((error) => console.log(error))

Vuejs axios example

Here is the example how axios can be used in your vuejs component. It has considered that axios has already installed & added.

new Vue({
  el: '#app',
  data() {
    return {
      info: null,
  mounted() {
      .then((response) => ( = response))

Reference link

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot