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>    

以上只是些簡單的應用，應該還有更深層次的使用，待續......