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

濮阳市住房和城乡建设局网站小程序seo

news 2026/4/7 3:49:47

濮阳市住房和城乡建设局网站,小程序seo,营销策划案ppt优秀案例,网站建设服务费怎么做会计分录在现代前端开发中，我们经常需要向服务器发送 HTTP 请求，并根据响应内容做不同的处理。axios 是一个流行的 HTTP 库，提供了拦截器功能，可以在请求和响应阶段插入自定义逻辑，这使得我们在处理认证、错误提示等场景时更…

在现代前端开发中，我们经常需要向服务器发送 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 中获取 tokenconst 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.dataswitch (code) {case ResultEnum.NO_AUTH:// 无权限，清除 token 并重定向localStorage.removeItem(TOKEN_KEY)router.push('/login')breakcase ResultEnum.LOGIN_FAIL:// 登录失败，显示消息并清除 tokenElMessage.error(message || "登录失败")localStorage.removeItem(TOKEN_KEY)breakcase ResultEnum.SUCCESS:// 成功响应，直接返回 datareturn 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.dataswitch (code) {case ResultEnum.NO_AUTH:localStorage.removeItem(TOKEN_KEY)router.push('/login')breakcase ResultEnum.LOGIN_FAIL:ElMessage.error(message || "登录失败")localStorage.removeItem(TOKEN_KEY)breakcase 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)}
)

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