当前位置：首页 > article >正文

使用 axios 拦截器实现请求和响应的统一处理（附常见面试题）

article 2024/11/18 5:35:03

在现代前端开发中，我们经常需要向服务器发送 HTTP 请求，并根据响应内容做不同的处理。axios 是一个流行的 HTTP 库，提供了 拦截器 功能，可以在请求和响应阶段插入自定义逻辑，这使得我们在处理认证、错误提示等场景时更为简洁、统一。

本文将讲解如何利用 axios 的请求拦截器和响应拦截器来处理 token、重定向、错误提示等场景，并附上一些常见的面试问题。

一、代码实现

首先，我们来看一个使用 axios 的拦截器实例代码：

import axios, { type AxiosResponse } from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { ResultEnum } from '@/enums/ResultEnum'
import { TOKEN_KEY } from '@/enums/SystemEnum'

// 创建 axios 实例
const AXIOS = axios.create({
  baseURL: '/lili-api',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

// 请求拦截器
AXIOS.interceptors.request.use(
  (config) => {
    // 从 localStorage 中获取 token
    const token = localStorage.getItem(TOKEN_KEY)
    
    if (token) {
      // 确保 headers 存在
      config.headers = config.headers || {}
      config.headers.Authorization = `Bearer ${token}`  // 使用标准的 Bearer 认证方式
    }
    return config
  },
  (error) => {
    console.error("请求错误：", error)
    return Promise.reject(error)
  }
)

// 响应拦截器
AXIOS.interceptors.response.use(
  (response) => {
    const { code, message } = response.data

    switch (code) {
      case ResultEnum.NO_AUTH:
        // 无权限，清除 token 并重定向
        localStorage.removeItem(TOKEN_KEY)
        router.push('/login')
        break
      case ResultEnum.LOGIN_FAIL:
        // 登录失败，显示消息并清除 token
        ElMessage.error(message || "登录失败")
        localStorage.removeItem(TOKEN_KEY)
        break
      case ResultEnum.SUCCESS:
        // 成功响应，直接返回 data
        return response.data as AxiosResponse<HttpResponse>
      default:
        // 其他错误状态，显示错误消息
        if (message) {
          ElMessage.error(message)
        }
        break
    }
    
    return response.data
  },
  (error) => {
    // 响应错误的处理
    if (error.response) {
      ElMessage.error(`请求错误：${error.response.status}`)
    } else {
      ElMessage.error("网络错误，请检查您的网络连接")
    }
    console.error("响应错误：", error)
    return Promise.reject(error)
  }
)

export default AXIOS

二、代码详解

让我们一步步分析这个代码实现。

1. 创建 axios 实例

const AXIOS = axios.create({
  baseURL: '/lili-api',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

这里用 axios.create() 创建了一个 axios 实例 AXIOS。这样做的好处是可以给该实例绑定一个特定的基础 URL (baseURL)，以后所有用 AXIOS 发送的请求都会自动加上这个 URL 前缀，省去了我们在每个请求里手动写基础路径的麻烦。

2. 请求拦截器

AXIOS.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem(TOKEN_KEY)
    
    if (token) {
      config.headers = config.headers || {}
      config.headers.Authorization = `Bearer ${token}`  // 使用标准的 Bearer 认证方式
    }
    return config
  },
  (error) => {
    console.error("请求错误：", error)
    return Promise.reject(error)
  }
)

请求拦截器会在每个请求发送前执行，它主要用来：

检查 localStorage 是否有 token。如果有，将其添加到请求头的 Authorization 字段，以 Bearer 格式添加，更符合 RESTful API 认证标准。
添加 Content-Type 为 application/json;charset=utf-8，表示请求体的数据格式是 JSON。
使用 console.error 方便调试，输出请求拦截阶段的错误。

3. 响应拦截器

AXIOS.interceptors.response.use(
  (response) => {
    const { code, message } = response.data

    switch (code) {
      case ResultEnum.NO_AUTH:
        localStorage.removeItem(TOKEN_KEY)
        router.push('/login')
        break
      case ResultEnum.LOGIN_FAIL:
        ElMessage.error(message || "登录失败")
        localStorage.removeItem(TOKEN_KEY)
        break
      case ResultEnum.SUCCESS:
        return response.data as AxiosResponse<HttpResponse>
      default:
        if (message) {
          ElMessage.error(message)
        }
        break
    }
    
    return response.data
  },
  (error) => {
    if (error.response) {
      ElMessage.error(`请求错误：${error.response.status}`)
    } else {
      ElMessage.error("网络错误，请检查您的网络连接")
    }
    console.error("响应错误：", error)
    return Promise.reject(error)
  }
)

响应拦截器主要功能是根据响应的状态码做出不同处理：