1、安装axios：
npm install --save axios vue-axios
2、安装qs:
qs.stringify(data)可以解决data数据格式问题
npm install --save axios vue-axios qs
3、在main.js页面中引用：
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs' Vue.prototype.$http = axios
Vue.prototype.qs = qs
4、在vue中使用
<script>
export default{
data(){
return {
msg:'axios使用'
}
},
created(){
this.axios({
method:'post',
url:'',
data:this.qs.stringify({
msg:this.msg
})
}).then((response)=>{
console.log(response)
})
}
}
</script>
以上是axios在vue中的简单应用，在实际的项目中，我们还需要考虑请求超时、是否登录等问题，这时需要在http请求中添加拦截器，在请求头中加token
下面是一个axios的工具interceptAxios.js
//http配置
//引入axios以及element ui 中的loading和message组件
import axios from 'axios'
import store from '../../store/store'
import * as types from '../../store/types'
import router from '../../routes'
import {Loading,Message} from 'element-ui'
//超时时间
axios.defaults.timeout = 500000
//http请求拦截器,在请求头中加token
var loadinginstace
axios.interceptors.request.use(config=>{
if (store.state.token) {
config.headers.Authorization = `${store.state.token}`
}
//element ui Loading方法
//loadinginstace = Loading.service({fullscreen:true})
return config
},error=>{
//loadinginstace.close()
Message.error({
message:'加载超时'
})
return Promise.reject(error)
})
//http响应拦截器
axios.interceptors.response.use(response=>{//响应成功关闭loading
//loadinginstace.close()
return response
},error=>{
if (error.response) {
switch (error.response.status) {
case 401:
// 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT)
store.commit(delPermission)
console.log("token无效----------------------------------")
// 只有在当前路由不是登录页面才跳转
router.currentRoute.path !== 'login' &&
router.replace({
path: 'login',
query: { redirect: router.currentRoute.path },
})
}
}
//loadinginstace.close()
Message.error({
message:'加载失败'
})
return Promise.reject(error)// 返回接口返回的错误信息
})
export default axios
在main.js中配置：
import Vue from 'vue'
import axios from './assets/js/interceptAxios'
import VueAxios from 'vue-axios'
import store from './store/store'
import Qs from 'qs' Vue.prototype.HOST="/api"//解决跨域问题，做一个反向代理
// 将axios挂载到prototype上，在组件中可以直接使用this.axios访问
Vue.prototype.$http=axios
Vue.prototype.qs=Qs
Vue.prototype.store = store Vue.use(VueAxios,axios)
在vue中应用：
<script>
export default {
data(){
return {
5 msg:''
6 }
},
methods:{
tool(data){
this.axios.post(this.HOST+'/vueHome/QueryTourOrigin.vue',this.qs.stringify(data))
.then(function(res){
12 console.log(res);
13 })
14 }
15 }
16 }
17 </script>
以上只是些简单的应用，应该还有更深层次的使用，待续......