axios封装拦截

request文件夹下 base.js域名 http.js 封转拦截 和 请求方式

//http.js文件---------------------------------------------
/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
 import axios from 'axios';
 import router from '../router/index';
 import store from '../vuex/store'; 
 import { Message } from 'element-ui';
 import baseObj  from './api/base';
 /** 
  * 提示函数 
  * 禁止点击蒙层、显示一秒后关闭
  */
 const tip = msg => {    
    Message({        
         message: msg,        
         duration: 0,   
         offset:100,
         customClass:'axiosMessage'  
     });
 }
 
 /** 
  * 跳转登录页
  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  */
 const toLogin = () => {
     router.replace({
         path: '/',        
        //  query: {
        //      redirect: router.currentRoute.fullPath
        //  }
     });
 }
 
//  /** 
//   * 请求失败后的错误统一处理 
//   * @param {Number} status 请求失败的状态码
//   */
 const errorHandle = (status, other) => {
     // 状态码判断
     switch (status) {
         // 401: 未登录状态，跳转登录页
         case 401: 
             toLogin();
             break;
         // 403 wxjToken过期
         // 清除wxjToken并跳转登录页
         case 403:
             tip('登录过期，请重新登录');
             localStorage.removeItem('wxjToken');
             store.commit('wxjToken', null);
             setTimeout(() => {
                 toLogin();
             }, 1000);
             break;
         // 404请求不存在
         case 404: 
             tip('请求的资源不存在'); 
             break;
         default:
             console.log(other);   
         }}
 
 // 创建axios实例
axios.create({    timeout: 1000 * 5});
 // 设置post请求头
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

 /** 
  * 请求拦截器 
  * 每次请求前，如果存在wxjToken则在请求头中携带wxjToken 
  */ 
  axios.interceptors.request.use(      
     config => {        
         // 登录流程控制中，根据本地是否存在wxjToken判断用户的登录情况        
         // 但是即使wxjToken存在，也有可能wxjToken是过期的，所以在每次的请求头中携带wxjToken        
         // 后台根据携带的wxjToken判断用户的登录情况，并返回给我们对应的状态码        
         // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        
         const wxjToken = store.state.wxjToken;        
         wxjToken && (config.headers.Authorization = wxjToken);        
         return config;    
     },    
     error => Promise.error(error))
 
 // 响应拦截器
 axios.interceptors.response.use( 
     // 请求成功
     res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
     // 请求失败
     error => {  
         const { response } = error;
         if (response) {
             // 请求已发出，但是不在2xx的范围 
             errorHandle(response.status, response.data.message);
             return Promise.reject(response);
         } else {
             // 处理断网的情况
             // eg:请求超时或断网时，更新state的network状态
             // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
             // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            //  修改vuex 的值可以 router.replace({path:'/',});
            //  store.commit('changeNetwork', false);
            console.log('断网了')

         }
     });
  
 

// -------------------------------华丽的分割线-------------------------------------------- 
 
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
let base = baseObj.sq
 export function get(url,params={}){
    url = base + url;
    return new Promise((resolve,reject) => {
        axios.get(url,{
        params:params
      })
      .then(response => { 
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
    })
  }
  
  
  /**
   * 封装post请求
   * @param url
   * @param data
   * @returns {Promise}
   */
   export function post(url,data = {}){
    url = base + url;
     return new Promise((resolve,reject) => {
       axios.post(url,data)
            .then(response => {
              resolve(response.data);
            },err => {
              reject(err)
            })
     })
   }
   
  
   /**
   * 封装patch请求
   * @param url
   * @param data
   * @returns {Promise}
   */
  export function patch(url,data = {}){
    url = base + url;
    return new Promise((resolve,reject) => {
      axios.patch(url,data)
           .then(response => {
             resolve(response.data);
           },err => {
             reject(err)
           })
    })
  }
  

   /**
   * 封装put请求
   * @param url
   * @param data
   * @returns {Promise}
   */
  export function put(url,data = {}){
    url = base + url;
    return new Promise((resolve,reject) => {
      axios.put(url,data)
           .then(response => {
             resolve(response.data);
           },err => {
             reject(err)
           })
    })
  }
base.js文件---------------------------------------------
/**
 * 接口域名的管理
 */
 const base = {    
    sq: 'https://cnodejs.org/api/',     
}

export default base; 

main.js文件---------------------------------------------
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './util/rem.js'
import '../src/assets/css/resrt.css'
import EventBus from '@/components/busComponent/bus.js'
  
import store from './vuex/store'
//挂载方法
import {post,get,patch,put} from './request/http'
Vue.prototype.$post=post;
Vue.prototype.$get=get;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
//获取token设置vuex
localStorage.setItem('wxjToken','detoken')
let wxjToken = localStorage.getItem('wxjToken')
store.commit('upWxjToken',wxjToken)
 
Vue.use(EventBus)
Vue.prototype.$EventBus = EventBus 

Vue.use(ElementUI);
Vue.config.productionTip = false 

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

文件中调用---------------------------------------------
 this.$get('v1/topics',{id:'61dbd8fd994582918ef7d174'})
      .then((response) => {
        console.log(response)
      })

vuex文件---------------------------------------------
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: { 
        count: 10, 
        wxjToken:null,
       
    },

    mutations: {
        upWxjToken(state,wxjToken){
            state.wxjToken = wxjToken 
        },
        sum(state, count) {
            state.count = count
        },
    },
    getters: {
     
    },
    actions: { 
    }
}) 
export default store