Vue Restful API and axios API Example – Vue js rest api authentication
Axios Features using Vuejs
- Make XMLHttpRequests from the browser using Vuejs
- Make example of http requests from simple node.js
- Supports the Promise API using Vuejs
- Intercept simple request and response using Vuejs
- Supports Transform simple request and response data using Vuejs
- Cancel simple requests using Vuejs
- Automatic simple Supports transforms for JSON data using Vuejs
- Client side support for protecting against XSRF using Vuejs
Vue Restful API and axios API Example – Vue js rest api authentication
Installation
[php]
# Yarn
$ yarn add axios
# NPM
$ npm install axios –save
[/php]
Using npm:
[php]
$ npm install axios
[/php]
or Using bower:
[php]
$ bower install axios
[/php]
or Using cdn:
[php]
[/php]
Requirements
What You Should Already Know
Before you study Vuejs,
need to HTML,
CSS,
JavaScript,
Vuejs Funda..
Browsers opetions
In this post we will show you Vue js rest api authentication , hear for Populating Data with a GET And POST Requestwith example.Download and demo we will give you demo,Source Code and example for implement.
Populating Data with a GET Request
[php]
-
{{post.title}}
{{post.body}}
- {{error.message}}
import axios from ‘axios’;
export default {
data: () => ({
products: [],
dumperr: []
}),
// using Vuejs Fetches products when the component is created.
created() {
axios.get(`http://infinityknow.com/products`)
.then(result => {
// JSON results are automatically parsed.
this.products = result.data
})
.catch(e => {
this.dumperr.push(e)
})
// async / await version (created() becomes async created())
//
// try {
// const result = await axios.get(`http://infinityknow.com/products`)
// this.products = result.data
// } catch (e) {
// this.dumperr.push(e)
// }
}
}
[/php]
Pushing Data with a Simple POST Request using Vuejs
Requests can be made by passing the relevant config to axios.
POST, PUT, PATCH, and DELETE
[php]
- {{error.message}}
import axios from ‘axios’;
export default {
data: () => ({
postBody: ”,
dumperr: []
}),
// using Vuejs : Pushes products to the call a server when called.
mydatapost() {
axios.post(`http://infinityknow.com/products`, {
body: this.postBody
})
.then(result => {})
.catch(e => {
this.dumperr.push(e)
})
// async / await version (mydatapost() becomes async mydatapost())
//
// try {
// await axios.post(`http://infinityknow.com/products`, {
// body: this.postBody
// })
// } catch (e) {
// this.dumperr.push(e)
// }
}
}
[/php]
A Common Base Instance
[php]
import axios from ‘axios’;
export const HTTP = axios.create({
baseURL: `http://infinityknow.com/`,
headers: {
Authorization: ‘Bearer {token}’
}
})
[/php]
HTTP
[php]
import {HTTP} from ‘./http-common’;
export default {
data: () => ({
products: [],
dumperr: []
}),
created() {
HTTP.get(`products`)
.then(result => {
this.products = result.data
})
.catch(e => {
this.dumperr.push(e)
})
}
}
[/php]