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>    

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