Vue Axios Get

Posted on  by admin

Vue Axios Post

Below is a quick set of examples to show how to send HTTP GET requests from Vue to a backend API using the axios HTTP client which is available on npm. Other HTTP examples available:. Vue + Axios: POST. Vue + Fetch: GET, POST. React + Fetch: GET, POST, PUT, DELETE. React + Axios: GET, POST, PUT, DELETE. Angular: GET, POST, PUT, DELETE. Blazor WebAssembly:GET, POST. Axios: GET, POST, PUT, DELETE.

Fetch: GET, POST, PUT, DELETE. With the npm CLI: npm install axios. With the yarn CLI: yarn add axios. This sends an HTTP GET request from Vue to the npm api to search for all vue packages using the query q=vue, then assigns the total returned in the response to the component data property totalVuePackages so it can be displayed in the component template.

Web development, programming languages, Software testing & others

Example Vue component at https://codesandbox.io/s/vue-axios-http-get-request-examples-ei7l8?file=/app/GetRequest.vue.

This sends the same GET request from Vue using axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

Example Vue component at https://codesandbox.io/s/vue-axios-http-get-request-examples-ei7l8?file=/app/GetRequestAsyncAwait.vue.


See the Pen First Step Axios and Vue by Vue (@Vue) on CodePen.

main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Add from './components/Add.vue';
Vue.use(VueRouter);
const routes = [
{
name: 'Weseley',
path: '/add',
component: Add
}
];
const router = new VueRouter({ mode: 'history', routes: routes });
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app')

We’ve got some data. But it looks pretty messy right now so let’s display it properly and add some error handling in case things aren’t working as expected or it takes longer than we thought to get the information.

It’s pretty typical that the information we’ll need is within the response, and we’ll have to traverse what we’ve just stored to access it properly.


In our case, we can see that the price information we need lives in response.data.bpi.

If we use this instead, our output is as follows:.









vue.js Axios Demo




See the Pen Second Step Axios and Vue by Vue (@Vue) on CodePen.

in Vue 3

This is a lot easier for us to display, so we can now update our HTML to display only the information we need from the data we’ve received, and we’ll create a filter to make sure that the decimal is in the appropriate place as well.

See the Pen Third Step Axios and Vue by Vue (@Vue) on CodePen.


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.

Displaying Data from an API

In an axios call, we’ll do so by using catch.

This will let us know if something failed during the API request, but what if the data is mangled or the API is down?






The Content Text app



Vue Content







App.vue
const vm = new Vue({
el: '#app',
data: {
results: [
{theme: "Hello World", abstr: "Norway is a Scandivian country"},
{theme: "Welcome Page", abstr: "Norway is a Scandivian country"},
{theme: "Home Page", abstr: "Norway is a Scandivian country"},
{theme: "End", abstr: "Norway is a Scandivian country"}
]}
});



{{ result.theme }}


{{ result.abstr }}.




Right now the user will just see nothing.

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http = axios
app = new Vue({
el: '#app',
components: { App },
template: ''
})

We might want to build a loader for this case, and then tell the user if we’re not able to get the data at all.

Usage:

You can hit the rerun button on this pen to see the loading status briefly while we gather data from the API:. See the Pen Fourth Step Axios and Vue by Vue (@Vue) on CodePen. This can be even further improved with the use of components for different sections and more distinct error reporting, depending on the API you’re using and the complexity of your application.

Why

The Fetch API is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true!