How to use Axios asynchronous request API in Vue

How to use Axios asynchronous request API in Vue

Setting up a basic HTTP request

First, execute the following command in the terminal to install Axios into the project:

install axiosnpm install axios

Then, import axios in your Vue component like this.

//App.view - importing axios
<script>
import axios from 'axios'

export default {
  setup () {

    }
}
</script>

Next, we use axios.get to get a random quote from the URL of Kanye's REST API. You can then use Promise.then to wait for the request to return a response.

//App.vue - sending our HTTP request
<script>
import axios from 'axios'

export default {
  setup () {
     axios.get('https://api.kanye.rest/').then(response => {
        // handle response
     })
  }
}
</script>

Now that we can get the response from the API, let's take a look at what it means. Save it as a quote named quote.

//App.vue - storing the response
<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  setup () {
     axios.get('https://api.kanye.rest/').then(response => {
        // handle response
        quote.value = response
     })
     return {
      quote
     }
  }
}
</script>

Finally, output it to the template and display it in italics and quotes. In addition, you need to add the source of the quotation.

//App.vue - template code
<template>
  <div>
    <i>"{{ quote }}"</i>
    - Kanye West
  </div>
</template>

Check the content in your browser.

We can see a random Kanye quote returned, along with some additional information, such as the response code of the request.

For our little application, we are only interested in the data.quote value, so we need to specify in the script which property on the response we want to access.

//App.vue - getting only our quote
axios.get('https://api.kanye.rest/').then(response => {
        // handle response
        quote.value = response.data.quote
})

The above code can get what you want:

Axios with async/await

You can combine Axios and async / await mode in Vue programs.

In the setup process, first comment out the current GET code, and then create an asynchronous method called loadQuote. Internally, we can use the same axios.get method, but we want to wait for it to complete with async and then store the result in a constant called response.

Then set the value of quote.

//App.vue - async Axios
const loadQuote = async () => {
      const response = await KanyeAPI.getQuote()
      quote.value = response.data.quote
}

It works exactly the same as the previous code, but this time using the asynchronous pattern.

Error handling with Axios

In the async-await pattern, you can add error handling to API calls using try and catch:

//Error handling with async/await
try {
        const response = await KanyeAPI.getQuote()
        quote.value = response.data.quote
} catch (err) {
        console.log(err)
}

If you use the raw promises syntax, you can add a .catch after the API call to catch any errors from the request.

//Error handling with Promises
axios.get('https://api.kanye.rest/')
      .then(response => {
        // handle response
        quote.value = response.data.quote
      }).catch(err => {
      console.log(err)
})

Sending a POST request

Let's take a look at how to send a POST request. Here we use JSONPlaceholder to Mock API calls.

Their documentation provides a /posts endpoint for testing POST requests.

Next we need to create a button that, when clicked, will trigger our API call. Create a button named "Create Post" in the template that calls a method named createPost when clicked.

  <div>
    <i>"{{ quote }}"</i>
    - Kanye West
    <p>
      <button @click="createPost">Create Post</button>
    </p>
  </div>
</template>

Next, we create the createPost method in our code and return it from setup.

This method is similar to the previous GET request. You only need to call axios.post and pass in the URL (ie https://jsonplaceholder.typicode.com/posts) to copy and paste the data in the document.

//App.vue
const createPost = () => {
      axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
          title: 'foo',
          body: 'bar',
          userId: 1,
      })).then(response => {
        console.log(response)
      })
}

Click the button to try it out. You can see that the console outputs a lot of information, telling us that the POST request has been successfully completed.

Writing reusable API calls with Axios

Create a src/services directory in your project and use it to organize all your api calls.

The directory contains 2 types of files:

  • API.js: Used to create an Axios instance with a defined baseURL, which will be used for all routes
  • *{specific functionality}*API.js : A more specific file that can be used to organize API calls into reusable modules

The advantage of this is that you can easily switch between development and production servers by just modifying a small piece of code.

Create the services/API.js file and set the Axios baseURL to default to the Kanye REST API.

API.js import axios from 'axios'

export default(url='https://api.kanye.rest') => {
    return axios.create({
        baseURL: url,
    })
}

Next create a KanyeAPI.js file and import the API from ./API. Here we want to export the different API calls.

Calling API() will give you an Axios instance on which you can call .get or .post.

//KanyeAPI.js
import API from './API'

export default {
    getQuote() {
        return API().get('/')
    },
}

Then inside App.vue, let our component use this new file through a reusable API call instead of creating Axios ourselves.

//App.vue
const loadQuote = async () => {
      try {
        const response = await KanyeAPI.getQuote() // <--- THIS LINE
        quote.value = response.data.quote
      } catch (err) {
        console.log(err)
      }
}

Next, move createPost into its own reusable method.

Back to KanyeAPI.js Add createPost to the export defaults. This will pass the data for the POST request as a parameter to our HTTP request.

Similar to the GET request, get the axios instance through the API, but this time you need to override the default URL value and pass the JSONplaceholder url. Then you can use Axios POST as usual.

//KanyeAPI.js
export default {
    getQuote() {
        return API().get('/')
    },
    createPost(data) {
        return API('https://jsonplaceholder.typicode.com/').post('/posts', data)
    }
}

So simple

Back in App.vue, you can call your new post method like this.

//App.vue
 const createPost = () => {
      const response = await KanyeAPI.createPost(JSON.stringify({
          title: 'foo',
          body: 'bar',
          userId: 1,
      }))

      console.log(response)
}

Now when you click the button, you can see that the dedicated API works properly.

The benefit of moving the API calls out of these Vue components and into its own file is that these API calls can be used anywhere throughout the application. This creates more reusable and scalable code.

Final code

// App.vue
<template>
  <div>
    <i>"{{ quote }}"</i>
    - Kanye West
    <p>
      <button @click="createPost">Create Post</button>
    </p>
  </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
import KanyeAPI from './services/KanyeAPI'
export default {
  setup () {

    const quote = ref('')

    const loadQuote = async () => {
      try {
        const response = await KanyeAPI.getQuote()
        quote.value = response.data.quote
      } catch (err) {
        console.log(err)
      }
    }

    loadQuote()

        // axios.get('https://api.kanye.rest/')
    // .then(response => {
    // // handle response
    // quote.value = response.data.quote
    // }).catch(err => {
    // console.log(err)
    // })

    const createPost = () => {
      const response = await KanyeAPI.createPost(JSON.stringify({
          title: 'foo',
          body: 'bar',
          userId: 1,
      }))

      console.log(response)
      // axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
      // title: 'foo',
      // body: 'bar',
      // userId: 1,
      // })).then(response => {
      // console.log(response)
      // })

          }

        return {
      createPost,
      quote
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
//API.js
import axios from 'axios'

export default(url='https://api.kanye.rest') => {
    return axios.create({
        baseURL: url,
    })
}
//KanyeAPI.js
import API from './API'
export default {
    getQuote() {
        return API().get('/')
    },
    createPost(data) {
        return API('https://jsonplaceholder.typicode.com/').post('/posts', data)
    }
}

The above is the details of how to use Axios asynchronously request API in Vue. For more information about Vue using Axios asynchronously request API, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • vue-cli implements asynchronous request to return mock simulation data
  • Vue asynchronous request data re-rendering method
  • vue-resourc method to initiate asynchronous request
  • The use of promise in Vue and the method of asynchronously requesting data
  • Vue form form submission + ajax asynchronous request + paging effect
  • How to make asynchronous requests in Vue

<<:  How to limit access frequency, download rate and number of concurrent connections in Nginx

>>:  MySQL 5.7.21 installation and configuration tutorial under Window10

Recommend

Detailed steps for running springboot project in Linux Docker

Introduction: The configuration of Docker running...

Web Design: The Accurate Location and Use of Massive Materials

Three times of memorization allows you to remembe...

Architecture and component description of docker private library Harbor

This article will explain the composition of the ...

WHMCS V7.4.2 Graphical Installation Tutorial

1. Introduction WHMCS provides an all-in-one solu...

Ubuntu 16.04 installation tutorial under VMware 12

This article shares with you the installation tut...

Detailed explanation of the Docker deployment tutorial for Jenkins beginners

This article deploys Jenkins+Maven+SVN+Tomcat thr...

Design theory: people-oriented green design

Reflections on the two viewpoints of “people-orie...

Linux forced release of occupied ports and Linux firewall port opening method detailed explanation

When installing nginx, mysql, tomcat and other se...

HTML+CSS to achieve responsive card hover effect

Table of contents accomplish: Summarize: Not much...

Docker image management common operation code examples

Mirroring is also one of the core components of D...

JavaScript realizes magnifying glass special effects

The effect to be achieved: When the mouse is plac...

Complete list of CentOS7 firewall operation commands

Table of contents Install: 1. Basic use of firewa...

A thorough understanding of js native syntax prototype, __proto__ and constructor

Table of contents 1 Introduction 2 Prerequisites ...

Methods and steps to access Baidu Maps API with JavaScript

Table of contents 1. Baidu Map API Access 2. Usin...

Implementing a puzzle game with js

This article shares the specific code of js to im...