axios在Vue中的简单应用（一）

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>    

以上只是些简单的应用，应该还有更深层次的使用，待续......