vue项目中导出axios实例，对请求方法进行封装设置基础地址时，对请求拦截器和响应拦截器的处理

 接下来代码是对axios请求基础地址的封装

该模块的主要功能是封装axios请求，并进行拦截器的书写
拦截器：主要用在验证登陆，携带后端要求的请求头token等

两种拦截器的区别：

 封装axios拦截器,拦截的是请求,一般用在需要在请求中添加请求信息(例如:请求头) // 路由拦截:拦截的是页面,可以决定用户有没有权利访问某个页面

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// import store from 'store'
import { Message } from 'element-ui'
import { getTimeStamp } from '@/utils/auth'
const TimeOut = 3600 // 定义超时时间

const service = axios.create({
  // 反向代理是解决不同环境下跨域的问题，设置基础值地址是统一设置url地址。基础地址是的设置会触发反向代理的跨域配置，所以要先设置好反向代理
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 定义5秒超时
}) // 创建一个axios的实例

// 请求拦截器
service.interceptors.request.use(config => {
  // 在这个位置需要统一的去注入token
  if (store.getters.token) {
    // 只有在有token的情况下 才有必要去检查时间戳是否超时
    if (IsCheckTimeOut()) {
      // 如果它为true表示 过期了
      // token没用了 因为超时了
      store.dispatch('user/logout') // 登出 *** 作
      // 跳转到登录页
      router.push('/login')
      return Promise.reject(new Error('token超时了'))
    }
    // 如果token存在 注入token
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config // 必须返回配置
}, error => {
  return Promise.reject(error)
}
) // 请求拦截器，请求拦截器主要处理 token的**`统一注入问题`**

// 响应拦截器，在服务端响应的数据到达客户端返回数据之前进行拦截，主要处理 返回的**`数据异常`** 和**`数据结构`**问题
/**
 * 响应拦截器的作用：响应拦截器会接收一个响应成功的函数，和响应失败的函数，在这里，服务器端响应后进行拦截
 * 响应成功拦截：在这里，服务器端响应成功后，进行响应成功拦截，拿到response参数响应对象，此时可以对响应的数据进行处理，axios响应的数据默认会有一层data进行包裹，可以先解构出来再把数据返回，接着进行数据的预处理，响应成功的话后端会返回一个success响应成功的字段，这里可以利用success来判断数据响应的成功失败，success为true，就代表响应的数据是成功的，直接返回数据data,如果响应失败，就利用element-ui组件的Message的提示信息，提示失败的信息，并且return 一个Promise.reject失败的错误对象， Promise.reject(new Error(message))，阻止后续流程的执行
 * 响应失败拦截：在这里，服务器端响应失败后，进行响应失败拦截，响应失败后，利用element-ui组件的Message提示响应失败的错误信息Message.error(error.message)，并且返回 一个执行错误，跳出当前的执行链，return Promise.reject(error)
 */
service.interceptors.response.use( // 响应成功的函数，响应失败的函数，响应失败会有error错误对象
  // axios默认加了一层data
  (response) => {
    const { success, message, data } = response.data
    if (success) {
      return data
    } else {
      Message.error(message)
      return Promise.reject(new Error(message))
    }
  }, error => {
    if (error.response && error.response.data && error.response.data.code === 10002) {
      // 后端告诉我token超时了,被动处理token
      store.dispatch('user/logout') // 登出action 删除token
      router.push('/login')
    } else {
      // 提示错误信息
      Message.error(error.message)
    }
    // 返回执行错误，让当前的执行链跳出来
    return Promise.reject(error)
  }
) // 响应拦截器

function IsCheckTimeOut () {
  var currentTime = Date.now() // 当前时间戳
  var timeStamp = getTimeStamp() // 缓存时间戳
  return (currentTime - timeStamp) / 1000 > TimeOut
}
export default service // 导出axios实例