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

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

# Yarn
$ yarn add axios

# NPM
$ npm install axios --save

Using npm:

$ npm install axios

or Using bower:

$ bower install axios

or Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

<template>
  <ul v-if="products && products.length">
    <li v-for="post of products">
      <p><strong>{{post.title}}</strong></p>
      <p>{{post.body}}</p>
    </li>
  </ul>

  <ul v-if="dumperr && dumperr.length">
    <li v-for="error of dumperr">
      {{error.message}}
    </li>
  </ul>
</template>

<script>
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)
    })

    // 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)
    // }
  }
}
</script>

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

<template>
  <input type="text" v-model="postBody" @change="mydatapost()"/>
  <ul v-if="dumperr && dumperr.length">
    <li v-for="error of dumperr">
      {{error.message}}
    </li>
  </ul>
</template>

<script>

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)
    // }
  }
}
</script>

A Common Base Instance

import axios from 'axios';

export const HTTP = axios.create({
  baseURL: `https://infinityknow.com/`,
  headers: {
    Authorization: 'Bearer {token}'
  }
})

HTTP

<script>
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)
    })
  }
}
</script>

Example