Axios 封装与异常处理详细总结

在前端项目中，我们通常需要处理各种请求和响应，并对可能出现的错误进行统一管理。@/utils/request.js 文件基于 axios 进行了封装，用于处理 POST、GET 等请求，管理请求头、错误提示、超时处理和 baseURL 的设置等功能。通过这种封装，可以简化和统一网络请求的管理。

一、基础配置

在 @/utils/request.js 文件中，我们首先创建了一个 axios 实例，并设置了一些默认配置：

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams } from "@/utils/ruoyi";

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置请求的 baseURL
  timeout: 10000 // 设置请求超时时间
})

在上述代码中，设置了 baseURL 和超时处理 timeout，并配置了默认的请求头 Content-Type。

二、请求拦截器

请求拦截器可以在请求发送之前对请求进行处理。在这里，我们主要是为请求添加 Authorization 头部信息：

// 请求拦截器
service.interceptors.request.use(config => {
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 为每个请求添加自定义 token
  }
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

这里通过判断 isToken 字段，决定是否需要在请求头中添加 Authorization 字段。这个字段用于携带用户的身份认证信息。

三、响应拦截器

响应拦截器用于在服务器响应后，对响应数据进行处理。在这里，我们主要处理了不同的响应状态码：

// 响应拦截器
service.interceptors.response.use(res => {
  const code = res.data.code || 200; // 获取响应状态码
  const msg = errorCode[code] || res.data.msg || errorCode['default'] // 获取错误信息

  if (code === 401) {
    MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      store.dispatch('LogOut').then(() => {
        location.href = '/index';
      })
    })
  } else if (code === 500) {
    Message({
      message: msg,
      type: 'error'
    })
    return Promise.reject(new Error(msg))
  } else if (code !== 200) {
    Notification.error({
      title: msg
    })
    return Promise.reject('error')
  } else {
    return res.data
  }
}, error => {
  let { message } = error;
  if (message === "Network Error") {
    message = "后端接口连接异常";
  } else if (message.includes("timeout")) {
    message = "系统接口请求超时";
  } else if (message.includes("Request failed with status code")) {
    message = "系统接口" + message.substr(message.length - 3) + "异常";
  }
  Message({
    message: message,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
})

• 状态码 401：提示用户登录状态已过期，并提供重新登录的选项。
• 状态码 500：统一提示服务器内部错误。
• 其他状态码：使用 Notification 组件进行错误通知。
• 网络异常或超时处理：针对网络错误或超时等特殊情况，进行了相应的处理和错误提示。

四、通用下载方法

封装了一个通用的下载方法，用于处理文件下载：

export function download(url, params, filename) {
  return service.post(url, params, {
    transformRequest: [(params) => {
      return tansParams(params)
    }],
    responseType: 'blob'
  }).then((data) => {
    const content = data
    const blob = new Blob([content])
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, filename)
    }
  }).catch((r) => {
    console.error(r)
  })
}

这个方法支持通过 POST 请求下载文件，并将文件以 blob 的形式保存到本地。

五、跳过 Token 的请求

如果有些请求不需要传递 token，可以在请求的 headers 中设置 isToken 属性为 false：

export function login(username, password, code, uuid) {
  return request({
    url: 'xxxx',
    headers: {
      isToken: false, // 设置不需要 token
    },
    method: 'get'
  })
}

这种配置方式可以确保在一些公共接口或登录接口中避免携带 token，从而避免不必要的认证错误。

六、总结

通过对 axios 的封装，@/utils/request.js 文件实现了对请求和响应的统一管理，包括请求头设置、超时处理、错误处理以及全局的拦截器配置。这种封装方式不仅提高了代码的可维护性，还增强了系统的安全性和稳定性。

• 全局配置：在 axios 实例中设置了 baseURL 和超时。
• 请求拦截器：用于在请求前处理请求头中的 token。
• 响应拦截器：统一处理不同的响应状态码，并提供了详细的错误提示。
• 通用下载：封装了通用的文件下载方法，支持 blob 下载。
• 可跳过 Token：支持部分接口不传递 token 的配置，增强了灵活性。