Vue Restful API and axios API Example – Vue js rest api authentication

Rate this post

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]

READ :  Create a webhook using PHP WooCommerce Rest Api

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(`https://infinityknow.com/products`)
.then(result => {
// JSON results are automatically parsed.
this.products = result.data
})
.catch(e => {
this.dumperr.push(e)
})

READ :  vuejs Authentication - vue sessionstorage and localstorage

// async / await version (created() becomes async created())
//
// try {
// const result = await axios.get(`https://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(`https://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(`https://infinityknow.com/products`, {
// body: this.postBody
// })
// } catch (e) {
// this.dumperr.push(e)
// }
}
}

READ :  vue js Login Form get http json data

[/php]

A Common Base Instance

[php]
import axios from ‘axios’;

export const HTTP = axios.create({
baseURL: `https://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]

Example

Leave a Reply

Your email address will not be published.