1、安装axios:
npm install --save axios vue-axios
2、安装qs:
qs.stringify(data)可以解决data数据格式问题
npm install --save axios vue-axios qs
3、在main.js页面中引用:
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、在vue中使用
1 <script> 2 export default{ 3 data(){ 4 return { 5 msg:'axios使用' 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>
以上是axios在vue中的简单应用,在实际的项目中,我们还需要考虑请求超时、是否登录等问题,这时需要在http请求中添加拦截器,在请求头中加token
下面是一个axios的工具interceptAxios.js
1 //http配置 2 //引入axios以及element ui 中的loading和message组件 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 //超时时间 9 axios.defaults.timeout = 500000 10 //http请求拦截器,在请求头中加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方法 17 //loadinginstace = Loading.service({fullscreen:true}) 18 return config 19 },error=>{ 20 //loadinginstace.close() 21 Message.error({ 22 message:'加载超时' 23 }) 24 return Promise.reject(error) 25 }) 26 //http响应拦截器 27 axios.interceptors.response.use(response=>{//响应成功关闭loading 28 //loadinginstace.close() 29 return response 30 },error=>{ 31 if (error.response) { 32 switch (error.response.status) { 33 case 401: 34 // 401 清除token信息并跳转到登录页面 35 store.commit(types.LOGOUT) 36 store.commit(delPermission) 37 console.log("token无效----------------------------------") 38 // 只有在当前路由不是登录页面才跳转 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:'加载失败' 49 }) 50 return Promise.reject(error)// 返回接口返回的错误信息 51 }) 52 export default axios
在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"//解决跨域问题,做一个反向代理 9 // 将axios挂载到prototype上,在组件中可以直接使用this.axios访问 10 Vue.prototype.$http=axios 11 Vue.prototype.qs=Qs 12 Vue.prototype.store = store 13 14 Vue.use(VueAxios,axios)
在vue中应用:
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>
以上只是些简单的应用,应该还有更深层次的使用,待续......