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