请求通用模块封装 `src/utils/request.js`文件代码

前言:是在不想记这些(拦截器和封装后端接口)

1.安装axios

npm i axios
复制代码

2.在 src/utils/request.js 模块下设置如下代码

// 配置通用的接口调用方法
import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 配置基准路径
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'

// 此时instance实例和axios类似
const instance = axios.create({
  // 设置超时时间
  timeout: 3000,
  // 设置基准的接口请求路径
  baseURL: baseURL
})

// 请求拦截器：统一添加请求头Token
instance.interceptors.request.use((config) => {
  // 如果已经登录，发送请求时携带token信息
  const token = store.state.user.profile.token
  if (token) {
    // 已经登录，添加请求头
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, (err) => {
  return Promise.reject(err)
})

// 响应拦截器:1、对后端返回的数据进行处理；2、处理token失效的问题
instance.interceptors.response.use((res) => {
  // 把axios包装的data属性去掉
  return res.data
}, (err) => {
  // 判断token是否失效
  if (err.response && err.response.status === 401) {
    // token失效了，清空用户信息，跳转到登录页面
    store.commit('user/updateUser', {})
    return router.push('/login')
  }
  return Promise.reject(err)
})

// 封装通用的调用后端接口的方法
export default (options) => {
  // axios返回的结果是Promise实例对象
  return instance({
    method: options.method,
    url: options.url,
    // data: options.data
    // 对象的key可以是动态变量（ES6提供的规则）
    // toUpperCase方法的作用：把小写字符串转换为大写
    [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
  })
}

复制代码