网上接网站项目,网站非法字符过滤,orchard wordpress,网站建设万户网络目录 前言1. Axios 简介与拦截器概念1.1 Axios 的特点1.2 什么是拦截器 2. 请求拦截器的应用与实践2.1 请求拦截器的作用2.2 请求拦截器实现 3. 响应拦截器的应用与实践3.1 响应拦截器的作用3.2 响应拦截器实现 4. 综合实例#xff1a;一个完整的 Axios 配置5. 使用拦截器的好… 目录 前言1. Axios 简介与拦截器概念1.1 Axios 的特点1.2 什么是拦截器 2. 请求拦截器的应用与实践2.1 请求拦截器的作用2.2 请求拦截器实现 3. 响应拦截器的应用与实践3.1 响应拦截器的作用3.2 响应拦截器实现 4. 综合实例一个完整的 Axios 配置5. 使用拦截器的好处与注意事项5.1 优势5.2 注意事项 结语 前言
在前端开发中HTTP 请求是与后端交互的重要方式。为了提高代码的可维护性、复用性以及用户体验使用 Axios 拦截器是非常常见的做法。通过拦截器我们可以集中管理请求和响应的逻辑比如配置请求头、处理错误信息等。本文将详细介绍如何使用 Axios 的请求拦截器和响应拦截器并结合实践案例分享如何让拦截器为开发效率和代码质量保驾护航。
1. Axios 简介与拦截器概念 1.1 Axios 的特点
Axios 是一个基于 Promise 的 HTTP 库支持在浏览器和 Node.js 环境下运行。它提供了许多开箱即用的功能比如
请求和响应的拦截。自动转换 JSON 数据。超时设置和取消请求。支持跨域。客户端防御 XSRF 攻击等。
这些功能让 Axios 成为目前主流的 HTTP 请求库之一。
1.2 什么是拦截器
拦截器是 Axios 提供的一种机制它允许开发者在请求发送前或响应到达后对数据进行统一处理。具体分为
请求拦截器拦截并处理即将发出的请求比如添加统一的请求头、添加认证 token 等。响应拦截器拦截并处理收到的响应比如解析数据结构、统一处理错误提示等。
使用拦截器可以显著简化代码逻辑并提高复用性。 2. 请求拦截器的应用与实践
2.1 请求拦截器的作用
请求拦截器主要用于处理以下场景
添加统一的请求头比如设置 Content-Type、添加认证 Token。记录和调试对每一个请求打印日志便于调试和监控。预处理请求数据在发送请求之前对数据格式进行处理。
2.2 请求拦截器实现
以下是一个基本的请求拦截器实现示例
// 引入 axios
import axios from axios;// 创建 axios 实例
const baseURL http://localhost:8080;
const instance axios.create({ baseURL });// 添加请求拦截器
instance.interceptors.request.use(config {// 在请求发送前处理请求config.headers[Content-Type] application/json; // 设置统一的请求头const token localStorage.getItem(token); // 从本地存储获取 tokenif (token) {config.headers[Authorization] Bearer ${token}; // 为每个请求添加认证信息}return config;},error {// 处理请求错误console.error(请求错误:, error);return Promise.reject(error);}
);export default instance;在这个实现中我们完成了
设置基础 URL通过 axios.create 设置公共的 API 地址。添加请求头为每个请求设置 Content-Type 和 Authorization。错误处理捕获请求配置过程中的错误并打印日志。
3. 响应拦截器的应用与实践
3.1 响应拦截器的作用
响应拦截器主要处理以下场景
提取核心数据很多后端返回的数据结构是嵌套的通过拦截器可以直接提取需要的核心数据。统一处理错误捕获 HTTP 错误码并展示友好的提示。日志记录和调试记录响应信息便于分析问题。
3.2 响应拦截器实现
以下是一个响应拦截器的示例
// 添加响应拦截器
instance.interceptors.response.use(response {// 处理响应数据const result response.data; // 假设后端返回 { code: 200, data: {...}, message: 成功 }if (result.code ! 200) {// 如果返回码不是 200认为请求失败alert(result.message || 请求失败);return Promise.reject(new Error(result.message));}return result.data; // 直接返回核心数据},error {// 处理响应错误if (error.response) {// 根据 HTTP 状态码给出提示const status error.response.status;if (status 401) {alert(未授权请重新登录);} else if (status 500) {alert(服务器错误请稍后重试);} else {alert(请求错误状态码${status});}} else {alert(网络错误请检查您的网络连接);}return Promise.reject(error);}
);在这个实现中我们完成了
数据提取直接返回后端数据中的 data 部分。错误提示根据不同的状态码给出提示比如未授权、服务器错误等。网络异常处理当服务器无法响应时给出通用提示。
4. 综合实例一个完整的 Axios 配置
以下是将请求拦截器和响应拦截器结合的完整实现
import axios from axios;const baseURL http://localhost:8080;
const instance axios.create({ baseURL });// 请求拦截器
instance.interceptors.request.use(config {config.headers[Content-Type] application/json;const token localStorage.getItem(token);if (token) {config.headers[Authorization] Bearer ${token};}return config;},error {console.error(请求错误:, error);return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(response {const result response.data;if (result.code ! 200) {alert(result.message || 请求失败);return Promise.reject(new Error(result.message));}return result.data;},error {if (error.response) {const status error.response.status;if (status 401) {alert(未授权请重新登录);} else if (status 500) {alert(服务器错误请稍后重试);} else {alert(请求错误状态码${status});}} else {alert(网络错误请检查您的网络连接);}return Promise.reject(error);}
);export default instance;5. 使用拦截器的好处与注意事项
5.1 优势
代码复用将公共逻辑集中到拦截器中减少重复代码。提高维护性当需求变更时只需修改拦截器即可应用到所有请求。增强用户体验通过统一的错误处理提升应用的稳定性和友好性。
5.2 注意事项
拦截器顺序多个拦截器时执行顺序与注册顺序一致。use 方法中的第一个函数处理成功第二个函数处理错误。避免无限循环在拦截器中若对请求进行重试或修改应小心避免引发递归调用。捕获错误确保所有 Promise 都有正确的错误处理避免意外崩溃。
结语
请求拦截器和响应拦截器的灵活性和强大功能使得它在项目开发中广受欢迎。合理使用拦截器可以帮助我们减少冗余代码提高代码的可读性和维护性。在项目中使用 Axios 拦截器会让开发过程更加高效。
