安装和配置

安装

使用 npm:

npm install axios

配置拦截器

在Vue项目中，可以创建一个utils文件夹，然后在里面创建一个request.js文件，用于封装axios的请求拦截器和响应拦截器。

// 在src/utils/request.js中
import axios from 'axios'
import { Message } from 'element-ui'
// 引入store
import store from '@/store'
// 引入获取token的方法
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API + '/api',
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 如果有token，就携带token
  if (store.getters.token) {
    config.headers['Authorization'] = getToken()
  }
  return config
},error => {
  console.log(error)
  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(response => {
  // 获取响应数据
  const res = response.data
  // 放行文件流
  if (response.headers['content-type'] === 'application/vnd.openxmlformats') {
    return res
  }
  // 如果响应数据的code不是20000，就提示错误
  if (res.code !== 20000) {
    Message({
      message: res.msg || 'Error',
      type: 'error',
      duration: 5 * 1000
    })
    
    // 如果响应数据的code是50008或者50012或者50014，就说明token过期或者非法，就重新登录
    if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      // 重新登陆
      MessageBox.confirm('您已被注销，您可以取消以停留在此页面，或者重新登录', '确认注销', {
        confirmButtonText: '重新登陆',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除token
        store.dispatch('user/resetToken').then(() => {
          // 重新加载页面
          location.reload()
        })
      })
    }
    return Promise.reject(new Error(res.msg || 'Error'))
  } else {
    return res
  }
}, error => {
  console.log('err' + error) // for debug
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
})

// 导出service
export default service

其中,utils/auth.js文件中的getToken方法如下：

// 在src/utils/auth.js中
const TokenKey = 'vue_admin_template_token'

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return localStorage.removeItem(TokenKey)
}

api集中管理

在src/api文件夹中，创建一个index.js文件，用于集中管理api。

// 在src/api/index.md.js中
import request from '@/utils/request'
const BASE_API = '/class'

// 默认导出
export default {
   // 获取班级列表
  getClassList() {
    return request({
      url: `${BASE_API}/getClassList`,
      method: 'get'
    })
  }
}

// 分别导出
export function getClassList() {
  return request({
    url: `${BASE_API}/getClassList`,
    method: 'get'
  })
}

使用

在组件中使用api：

// 在src/views/class/index.md.vue中

// 默认导出引入
import api from '@/api'

// 分别导出引入
import { getClassList } from '@/api'
// 或者
import * as api from '@/api'

export default {
  data() {
    return {
      classList: []
    }
  },
  methods: {
    // 获取班级列表
    async getClassList() {
      const res = await api.getClassList()
      this.classList = res.data
    }
  },
  created() {
    this.getClassList()
  }
}