① 版本① axios 封装

1 axios 封装

@/utils/request

1. 创建axios实例

const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

2. request拦截器

service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken()
  }
  return config
}, error => {
  Promise.reject(error)
})

3. respone拦截器

service.interceptors.response.use(
  response => {
    const res = response.data
    if(res.code && res.code !== 0) {
      var msg = res.msg || res.data
      if(res.code === 100002) {
        removeToken()
        Message({
          message: '登录超时，请重新登录',
          type: 'error',
          duration: 3 * 1000
        })
        sessionStorage.clear()
        router.replace({
          path: '/login?redirect=/welcome'
        })
        return Promise.reject(res)
      } else {
        Message({
          message: msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(new Error(res.msg || 'Error'))
      }
    } else {
      return res
    }
  },
  error => {
    const msg = error.response.data.msg
    const statusCode = error.response.status
    const code = error.response.data.code
    if(code && code === 100002 || statusCode && statusCode === 401) {
      removeToken()
      Message({
        message: '登录超时，请重新登录',
        type: 'error',
        duration: 3 * 1000
      })
      sessionStorage.clear()
      router.replace({
        path: '/login?redirect=/welcome'
      })
      return Promise.reject(error)
    } else {
      Message({
        message: msg || error.toString(),
        type: 'error',
        duration: 5 * 1000
      })
    }
    return Promise.reject(error)
  }
)

4. Cookie 相关

import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

2 api定义

import request from '@/utils/request'

export function getTreeData() {
  return request({
      url: `/api/resource/getTreeData`,
      method: 'GET'
  })
}

3 使用

import { getTreeData } from '@/api/resource'

async getTreeData() {
  this.treeLoading = true
  let res = await getTreeData()
  this.treeLoading = false
  if(res && res.code == 0) {
    this.resourceTreeData = res.data
  } else {
    this.$message.error('请求出现错误，请稍后重试');
  }
}