axios的二次封装

桃子不吃李子2025-10-27 0:05

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，特性【摘自官网】：

支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
... ...

二次封装 axios：

① 安装依赖

npm i axios

② 创建实例对象

js 复制代码

const instance = axios.create({
  baseURL: 'https://v3pz.itndedu.com/v3pz',
  timeout: 5000
})

③ 添加请求拦截器：在请求被处理之前拦截，在这里可以统一配置请求头、添加 token、封装 get，post，put，delete 请求、加上接口错误重试机制等等

js 复制代码

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('TOKEN')
  // 不需要token的api
  const whiteUrl = ['/get/code', '/user/authentication', '/login']
  if(token && !whiteUrl.includes(config.url)) {
    // 需要token验证的，在请求头中设置token
    config.headers['x-token'] = token
  }
  return config
}, error => {
  return Promise.reject(error)
})

④ 添加响应拦截器：在这里对 http 错误码进行拦截、简化返回的信息等

js 复制代码

instance.interceptors.response.use(response => {
  if(response.data.code === -1) {
    // console.log(response)
    ElMessage.warning(response.data.msg || response.data.message?.msg || response.data.message)
  } else if(response.data.code === -2) {
    // token 过期
    localStorage.removeItem('TOKEN')
    localStorage.removeItem('USERINFO')
    localStorage.removeItem('menu')
    // 跳转到同源的根目录：http://localhost:5173/
    window.location.href = window.location.origin
    ElMessage.error('token过期，请重新登录')
  }
  // 直接返回data，调用层少一层 .data
  return response.data
}, error => {
  // 超出 2xx 范围的状态码都会触发该函数
  return Promise.reject(error)
})