5.axios 请求响应拦截器

//全局配制写法
/*axios全局配置*/
axios.defaults.withCredentials = true;  //跨域类型时是否在请求中协带cookie
axios.defaults.baseURL = '/api/';//地址
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';//请求头根据自定义需求
axios.defaults.timeout = 8000;///默认请求超时时间
Vue.prototype.$axios = axios;

request.js
//针对axios封装的ajax请求工具类
import axios from 'axios'
import qs from 'qs'
import {Message} from 'element-ui'
// 先导入vuex,因为要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '@/store/index';
const service=axios.create({
    baseURL:process.env.APP_BASE_API,    //环境设置
    timeout:5000,
    //请求头设置
      headers: {
        "accept": "application/json",
        'Content-Type': 'application/json',
  },
  //`paramsSerializer` 是一个负责 `params` 序列化的函数
    paramsSerializer: function(params){
    return qs.stringify(params, {arrayFormat:'brackets'})
  }
})
//请求拦截器
service.interceptors.request.use(
    config=>{
        // 每次发送请求之前判断是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，token也有可能是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);  
        // config.headers['token']=''     //没有登陆界面时，可以不携带token
        return config
    },
    error=>{
        return Promise.reject(error)
    }
)
//响应拦截器
service.interceptors.response.use(
    response=>{
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据，否则的话抛出错误     
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }
    },
    // 服务器状态码不是2开头的的情况
    // 这里可以跟后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error=>{
       if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                     Message({
                        message: '登录过期，请重新登录',
                        type:"waring"
                        duration: 1000,
                    });
                  // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                  // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                // 404请求不存在
                case 404:
                    Message({
                         message: '网络请求不存在',
                         type:'waring',
                         duration: 2*1000,
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    Message({
                        message: error.response.data.message,
                        type:'error',
                        duration: 2*1000, 
                    });
            }
            return Promise.reject(error.response);
        }
    }
)
export default service

环境配置

在根目录下新建：.env.development ,开发环境的配置文件，输入如下代码：

VUE_APP_ENV ='development'
VUE_APP_API_BASE='/api'

在根目录下新建：.env.production ,生产环境的配置文件，输入如下代码：

VUE_APP_ENV ='production'
VUE_APP_API_BASE='/'

封装get和post方法

在api文件夹下新建一个如user.js文件，封装get和post请求方式，如下：

//先导入封装的axios文件
import request from '@/utils/request'
export function postUserData(data){   //这里方法与后台Controller方法名一致就可以
    return request({
        url:'请求地址',
        method:'post',   //post请求方式
        data
    })
}
export function getUserData(data){   
    return request({
        url:'请求地址',
        method:'get',     //get请求方式
        data
    })
}

import axios from 'axios'
import qs from 'qs'
import router from '../router/index'
import store from '../store/index'
import { Message } from 'element-ui';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
/* 设置请求超时的时间 */
axios.defaults.timeout = 10000;
//设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/json';
//携带cookie
axios.defaults.withCredentials = true;
const http = axios.create({
  baseURL: '', 
  withCredentials: true, // 跨域类型时是否在请求中协带cookie
  paramsSerializer: function(params){
    return qs.stringify(params, {arrayFormat:'brackets'})
  }
})
//使用 NProgress 进度条
http.interceptors.request.use(config => {
  //判断token是否带有内容，若有则在请求头添加Authorization
  let _obj = sessionStorage.getItem("t")
  var _token =''
  if(_obj !== null && _obj !== 'undefined'){
      let _nt = new Date().getTime()  
      let obj = JSON.parse(_obj)
        //后端设置token时效7200s
      if(_nt - Number(obj._lt) > 7190000){
          sessionStorage.clear()
      }else{
         _token = obj._t
      }
  }
  if(_token){
    config.headers.common['Authorization'] = "Bearer " + _token 
  }
  // 展示进度条
  NProgress.start()
  // 最后必须返回config
  return config
},function (error) {
  router.push('/login')
  return Promise.reject(error)
})
http.interceptors.response.use(config => {
  // 关闭进度条
  NProgress.done()
  // 最后必须返回config
  return config
},function (error) {
  // 对响应错误做点什么
    if(error.message.includes('timeout of')){
      Message.warning("网络超时,请检查网络! ")
  }
  if (error.response) {
    switch (error.response.status) {
      // 403过期——返回登录页 401未认证————返回上一页
      case 403:
        Message.warning("访问权限超时，请重新登录！")
        sessionStorage.clear()
        router.push('/login')
        break;
      case 401:
        Message.warning("该账号对此页面没有访问权限！")
        router.go(-1)
        // 关闭进度条
        NProgress.done()
        // 最后必须返回config
        return config
    }
  }
  return Promise.reject(error)
})
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function axiosGet(url, params) {
  return new Promise((resolve, reject) => {
    http.get(url, {
      params: params
    }).then(res => {
      if(res.data.code == 9990){
        router.push('/login')
      }
      resolve(res.data);
    }).catch(err => {
      if(res.data.code == 9990){
        router.push('/login')
      }
      reject(err.data)
    })
  });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function axiosPost(url, params) {
  return new Promise((resolve, reject) => {
    http.post(url, params)
      .then(res => {
        if(res.data.code == 9990){
          router.push('/login')
        }
        resolve(res.data);
      })
      .catch(err => {
        if(res.data.code == 9990){
          router.push('/login')
        }
        reject(err.data)
      })
  });
}