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...