Using Axios in Vue

1. Installing Axios

Npm:

Install axios-s

Cdn:

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

2. Configure Axios

Create a new Api/index.js file in your project to configure the Axios

Api/index.js

Import Axios from ' Axios '; let http=axios.create ({baseURL:' Http://localhost:8080/', Withcredentials:true, headers: {' Content-type ': ' Application/x-www-form-urlencoded;charset=utf-8 '}, Transformrequest: [function(data) {Let NewData= ' ';  for(Let Kinchdata) {      if(Data.hasownproperty (k) = = =true) {NewData+ = encodeURIComponent (k) + ' = ' + encodeURIComponent (data[k]) + ' & '; }    }    returnNewData; }]});functionApiaxios (method, URL, params, response) {http ({method:method, url:url, Data:method= = = ' POST ' | | method = = = ' PUT '? Params:NULL, Params:method= = = ' GET ' | | method = = = ' DELETE '? Params:NULL,  }). Then (function(RES) {response (res.data); }).Catch(function(ERR) {response (ERR); })}exportdefault{get:function(URL, params, response) {returnApiaxios (' GET ', URL, params, response)}, Post:function(URL, params, response) {returnApiaxios (' POST ', URL, params, response)}, put:function(URL, params, response) {returnApiaxios (' PUT ', URL, params, response)},Delete:function(URL, params, response) {returnApiaxios (' DELETE ', URL, params, response)}}

The post, GET, PUT, delete methods are configured here. and automatically convert JSON format data to URL stitching.

Cross-domain is configured at the same time, Withcredentials is set to False if not required

and set the default header address is: http://localhost:8080/, so that when the call only write access method can be

3. Using Axios

First introduce the method in the Main.js

Import API from './api/index.js '= API;

and call it where it's needed.

this. $api. Post (' User/login.do (address) ', {    "parameter name": "Argument value"= = {     if (Response.message = = = undefined        ) {this. $message. Success (response); Response is the return     parameter else  {        this. $message. Error (Response.message \ \ \ Request failed, response as failure Message     }});

Using Axios in Vue