1. Install axios:

npm install --save axios vue-axios

2. Install qs:

qs.stringify(data) can solve the problem of data format

npm install --save axios vue-axios qs

3. Refer to in the main.js page:

1 import Vue from 'vue'
2 import axios from 'axios'
3 import qs from 'qs'
4 
5 Vue.prototype.$http = axios
6 Vue.prototype.qs = qs

4. Use in vue

 1 <script>
 2 export default{
 3     data(){
 4         return {
 5             msg:'axios Use'
 6         }
 7     },
 8     created(){
 9         this.axios({
10                 method:'post',
11                 url:'',
12                 data:this.qs.stringify({
13                     msg:this.msg
14             })
15         }).then((response)=>{
16             console.log(response)
17         })
18     }
19 }
20 </script>                            

The above is a simple application of axios in vue. In practical projects, we need to consider the problem of request timeout and login. At this time, we need to add interceptors in http requests and token in the request header.

Here is an axios tool interceptAxios.js

 1 //http To configure
 2 //Introduce axios as well as element ui Medium loading and message assembly
 3 import axios from 'axios'
 4 import store from '../../store/store'
 5 import * as types from '../../store/types'
 6 import router from '../../routes'
 7 import {Loading,Message} from 'element-ui'
 8 //timeout
 9 axios.defaults.timeout = 500000
10 //http request interceptor,Add in the request header token
11 var loadinginstace
12 axios.interceptors.request.use(config=>{
13     if (store.state.token) {
14       config.headers.Authorization = `${store.state.token}`
15     }
16     //element ui Loading Method
17     //loadinginstace = Loading.service({fullscreen:true})
18     return config
19 },error=>{
20     //loadinginstace.close()
21     Message.error({
22         message:'Load timeout'
23     })
24     return Promise.reject(error)
25 })
26 //http Response interceptor
27 axios.interceptors.response.use(response=>{//Response successfully closed loading
28     //loadinginstace.close()
29     return response
30 },error=>{
31     if (error.response) {
32       switch (error.response.status) {
33         case 401:
34           // 401 Eliminate token Information and jump to login page
35           store.commit(types.LOGOUT)
36           store.commit(delPermission)
37           console.log("token invalid----------------------------------")
38           // Jump only if the current route is not a login page
39           router.currentRoute.path !== 'login' &&
40             router.replace({
41               path: 'login',
42               query: { redirect: router.currentRoute.path },
43             })
44       }
45     }
46     //loadinginstace.close()
47     Message.error({
48         message:'Load failure'
49     })
50     return Promise.reject(error)// Returns the error information returned by the interface
51 })
52 export default axios

Configure in main.js:

 1 import Vue from 'vue'
 2 import axios from './assets/js/interceptAxios'
 3 import VueAxios from 'vue-axios'
 4 import store from './store/store'
 5 import Qs from 'qs'
 6 
 7 
 8 Vue.prototype.HOST="/api"//Solve cross-domain problems and act as a reverse proxy
 9 // take axios Mount to prototype On, it can be used directly in components this.axios Visit
10 Vue.prototype.$http=axios
11 Vue.prototype.qs=Qs
12 Vue.prototype.store = store
13 
14 Vue.use(VueAxios,axios)

In vue application:

 1 <script>
 2 export default {
 3     data(){
 4 　　　　　return {
 5　　　　　　　msg:''
 6　　　　　}　
 7     },
 8     methods:{
 9         tool(data){
 10             this.axios.post(this.HOST+'/vueHome/QueryTourOrigin.vue',this.qs.stringify(data))
 11                 .then(function(res){
 12                     console.log(res);
 13            })
 14          }
 15     }
 16 }
 17 </script>    

The above are just some simple applications, which should be further used, to be continued...