[JavaScript知识库]Vue中基于axios的 请求通用模块封装 基本思路

// 通用接口调用文件
import request from 'axios'
// 引入 vuex
import store from '@/store'
// 引入 vue-router
import router from '@/router'

// 定义基地址
export const baseURL = ''

// 创建一个独立的实例对象
const axios = request.create({
  baseURL: baseURL
})

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 在 vuex 中获取用户的身份认证（token）
    const token = store.state.user.profile.token
    // 通过 token 判断用户当前是否已经登录
    // 如用户已登录 --> 在请求头中添加对应的身份认证（token）
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截器
axios.interceptors.response.use(
  res => {
    // 数据脱壳
    return res.data
  },
  error => {
    // 判断用户身份认证是否过期
    // 如已过期 --> 跳回登录页并终止当前方法
    if (error.response && error.response.status === 401) return router.push('/login')
    return Promise.reject(error)
  }
)

// 默认导出封装的 ajax 请求方法
export default options => {
  return axios({
    method: options.method || 'GET',
    url: options.url,
    [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
  })
}