前端笔记-Axios
Axios学习目标
Axios与API交互 | 1、Axios配置与使用 |
2、请求/响应拦截器 | |
3、API设计模式(了解RESTful风格即可) |
学习参考:起步 | Axios中文文档 | Axios中文网
什么是Axios
Axios 是一个基于 Promise 的现代化 HTTP 客户端库,专门用于浏览器和 Node.js 环境。
其核心特性有如下:
-
跨平台支持:
- 在浏览器中通过 XMLHttpRequest 发送请求
- 在 Node.js 中通过 http 模块发送请求
-
Promise API:
- 所有请求都返回 Promise 对象
- 支持 async/await 语法
-
自动转换:
- 自动转换请求和响应数据(如 JSON 转换)
- 可自定义转换逻辑
-
拦截器系统:
- 请求和响应拦截
- 可用于添加认证头、处理错误等
-
取消请求:
- 支持取消正在进行的请求
- 使用 CancelToken 或 AbortController
经常使用于:
- 前端应用与 RESTful API 交互
- 需要统一处理 HTTP 请求的大型应用
- 需要请求拦截(如添加认证头)的应用
- 需要取消请求功能的复杂交互应用
- 同构应用(既在浏览器又在服务器运行)
配置与使用
安装
使用 npm:
npm install axios
使用cdn:
https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
示例:
服务器端:
const express = require('express');
//创建应用对象
const app = express();// 添加请求体解析
app.use(express.json());
app.use(express.urlencoded({ extended: true }));//创建路由规则// Axios请求
app.all('/axios-server', (req, res) => {// 设置响应头res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Headers', '*');// 设置响应体const data ={name:'axios发送的请求'};res.send(JSON.stringify(data));//res.send('Its Axios Qusetion!');
}); // 404处理
app.use((req, res) => {res.status(404).send('Not Found');
});//监听端口启动服务
app.listen(8000, () => {console.log('Server is running on port 8000');
});
html文件:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios 发送AJAX请求</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">Axios 发送AJAX请求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型</button></div><script>const btns = document.querySelectorAll("button");// GET请求示例btns[0].onclick = function() {axios.get('http://127.0.0.1:8000/axios-server', {params: { a: 100,b: 200},//请求头信息headers:{name:'value',age:20}}).then(function(response) {console.log(response.data);}).catch(function(error) {console.error('请求失败:', error);});};// POST请求示例btns[1].onclick = function() {axios.post('http://127.0.0.1:8000/axios-server', {username: 'admin',password: '123456'}).then(function(response) {console.log(response.data);});};// 通用AJAX请求示例btns[2].onclick = function() {axios({method: 'POST',url: 'http://127.0.0.1:8000/axios-server',data: {key1: 'value1',key2: 'value2'}}).then(function(response) {console.log(response.data);});};</script>
</body>
</html>
可以直接浏览器打开代码查看一下F12控制台的信息,这里不做重点讲解,只了解使用。
请求/响应拦截器
请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {/*** 在发送请求前做些什么* config对象包含请求的所有配置信息* 可以在这里统一处理以下内容:* 1. 添加认证token* 2. 添加公共参数* 3. 显示loading状态* 4. 记录请求日志*/// 添加认证tokenconst token = localStorage.getItem('authToken');if (token) {config.headers.Authorization = `Bearer ${token}`;}// 添加时间戳防止缓存if (config.method === 'get') {config.params = config.params || {};config.params._t = Date.now();}// 必须返回修改后的configreturn config;},function (error) {/*** 对请求错误做些什么* 通常是在请求配置出错时触发* 比如config格式不正确等*/console.error('请求配置错误:', error);// 返回一个被拒绝的Promise,会进入catch流程return Promise.reject(error);}
);
响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {/*** 对响应数据做点什么* 2xx范围内的状态码都会触发这个函数* 可以在这里:* 1. 统一处理响应数据格式* 2. 隐藏loading状态* 3. 处理业务特定的状态码*/// 直接返回response.data,简化后续处理return response.data;// 或者根据业务状态码进一步处理if (response.data.code === 200) {return response.data.data;} else {// 业务逻辑错误return Promise.reject(response.data.message);}},function (error) {/*** 对响应错误做点什么* 超出2xx范围的状态码都会触发这个函数* 可以在这里:* 1. 统一处理错误* 2. 根据状态码跳转页面* 3. 显示错误提示*/// 错误对象结构说明if (error.response) {// 请求已发出,服务器返回了错误状态码const { status, data } = error.response;switch (status) {case 401:// 未授权,跳转到登录页window.location.href = '/login';break;case 403:// 禁止访问,显示权限不足提示showToast('权限不足,请联系管理员');break;case 404:// 资源不存在showToast('请求的资源不存在');break;case 500:// 服务器错误showToast('服务器内部错误,请稍后再试');break;default:// 其他错误showToast(`请求错误: ${status}`);}// 可以在这里记录错误日志logError(error);} else if (error.request) {// 请求已发出但没有收到响应console.error('无响应:', error.request);showToast('网络连接异常,请检查网络');} else {// 设置请求时发生了错误console.error('请求配置错误:', error.message);showToast('请求配置错误');}// 继续抛出错误,让调用者可以处理return Promise.reject(error);}
);
API设计模式与RESTful最佳实践
RESTful API设计原则详解
1. 资源导向设计:
- 使用名词而非动词表示资源(如
/users
而不是/getUsers
) - 资源使用复数形式(如
/articles
而不是/article
) - 层级关系表达:
/users/123/posts
表示用户123的所有帖子
2. HTTP方法语义:
方法 | 语义 | 幂等性 | 安全性 | 请求体 | 典型状态码 | 适用场景 |
---|---|---|---|---|---|---|
GET | 获取资源 | ✔️ 是 | ✔️ 是 | ❌ 无 | 200 OK 404 Not Found | 查询数据、获取资源详情 |
POST | 创建资源 | ❌ 否 | ❌ 否 | ✔️ 有 | 201 Created 400 Bad Request | 创建新资源、提交表单 |
PUT | 替换/完整更新资源 | ✔️ 是 | ❌ 否 | ✔️ 有 | 200 OK 204 No Content | 全量更新(需传完整字段) |
PATCH | 部分更新资源 | ❌ 否 | ❌ 否 | ✔️ 有 | 200 OK 422 Unprocessable Entity | 增量更新(只需传修改字段) |
DELETE | 删除资源 | ✔️ 是 | ❌ 否 | ❌ 无 | 204 No Content 404 Not Found | 删除指定资源 |
3. 状态码使用指南:
// 2xx 成功
200 OK - 常规成功响应
201 Created - 资源创建成功
204 No Content - 成功但无返回内容// 4xx 客户端错误
400 Bad Request - 请求格式错误
401 Unauthorized - 需要认证
403 Forbidden - 无权限访问
404 Not Found - 资源不存在// 5xx 服务器错误
500 Internal Server Error - 服务器内部错误
503 Service Unavailable - 服务不可用
完整API封装示例
// src/api/auth.js - 认证相关APIimport axios from './axiosInstance';export default {/*** 用户登录* @param {Object} credentials - 登录凭据* @param {string} credentials.username - 用户名* @param {string} credentials.password - 密码* @returns {Promise} 包含用户数据的Promise*/login(credentials) {return axios.post('/auth/login', credentials).then(response => {// 登录成功处理const { token, user } = response.data;// 存储token到本地存储localStorage.setItem('authToken', token);// 返回用户数据return user;});},/*** 用户注销* @returns {Promise} 空Promise*/logout() {// 清除本地tokenlocalStorage.removeItem('authToken');// 调用服务器注销接口return axios.post('/auth/logout');},/*** 获取当前用户信息* @returns {Promise} 包含用户信息的Promise*/getCurrentUser() {return axios.get('/auth/me').then(response => response.data);}
};// src/api/users.js - 用户管理APIimport axios from './axiosInstance';export default {/*** 获取用户列表* @param {Object} [params] - 查询参数* @param {number} [params.page=1] - 页码* @param {number} [params.limit=10] - 每页数量* @returns {Promise} 包含用户列表和分页信息的Promise*/getUsers(params = { page: 1, limit: 10 }) {return axios.get('/users', { params }).then(response => ({users: response.data.items,pagination: response.data.pagination}));},/*** 创建新用户* @param {Object} userData - 用户数据* @returns {Promise} 包含新用户信息的Promise*/createUser(userData) {return axios.post('/users', userData).then(response => response.data);},/*** 更新用户信息* @param {number} id - 用户ID* @param {Object} updates - 更新字段* @param {boolean} [partial=false] - 是否部分更新* @returns {Promise} 包含更新后用户信息的Promise*/updateUser(id, updates, partial = false) {const method = partial ? 'patch' : 'put';return axios[method](`/users/${id}`, updates).then(response => response.data);},/*** 删除用户* @param {number} id - 用户ID* @returns {Promise} 空Promise*/deleteUser(id) {return axios.delete(`/users/${id}`);}
};
在Vue组件中使用API的示例
// src/components/UserList.vueimport userAPI from '@/api/users';
import authAPI from '@/api/auth';export default {data() {return {users: [],currentUser: null,loading: false,pagination: {page: 1,limit: 10,total: 0}};},async created() {// 组件创建时获取当前用户和用户列表await this.fetchCurrentUser();await this.fetchUsers();},methods: {// 获取当前登录用户async fetchCurrentUser() {try {this.currentUser = await authAPI.getCurrentUser();} catch (error) {console.error('获取用户信息失败:', error);this.$router.push('/login');}},// 获取用户列表async fetchUsers() {this.loading = true;try {const { users, pagination } = await userAPI.getUsers({page: this.pagination.page,limit: this.pagination.limit});this.users = users;this.pagination = {...this.pagination,total: pagination.total};} catch (error) {console.error('获取用户列表失败:', error);this.$message.error('加载用户列表失败,请重试');} finally {this.loading = false;}},// 删除用户async handleDelete(userId) {try {await this.$confirm('确定要删除这个用户吗?', '提示', {type: 'warning'});await userAPI.deleteUser(userId);// 删除成功后刷新列表this.fetchUsers();this.$message.success('删除用户成功');} catch (error) {if (error !== 'cancel') {console.error('删除用户失败:', error);this.$message.error('删除用户失败');}}},// 切换页码handlePageChange(page) {this.pagination.page = page;this.fetchUsers();}}
};
总结:Axios最佳实践
-
配置管理:
- 使用
axios.create()
创建不同用途的实例 - 将基础URL、超时时间等配置集中管理
- 使用
-
拦截器使用:
- 请求拦截器处理认证、公共参数
- 响应拦截器统一处理错误和返回数据
-
API封装:
- 按功能模块组织API
- 为每个方法添加清晰的JSDoc注释
- 统一返回Promise便于调用
-
错误处理:
- 区分网络错误、服务器错误和业务错误
- 在拦截器和具体调用处分层处理
-
RESTful设计:
- 遵循资源导向原则
- 正确使用HTTP方法和状态码
- 保持接口风格一致
相关文章:

前端笔记-Axios
Axios学习目标 Axios与API交互1、Axios配置与使用2、请求/响应拦截器3、API设计模式(了解RESTful风格即可) 学习参考:起步 | Axios中文文档 | Axios中文网 什么是Axios Axios 是一个基于 Promise 的现代化 HTTP 客户端库,专…...
vue3数据响应式丢失的情况有哪些
在 Vue 3 中,响应式系统使用的是 Proxy 实现,相比 Vue 2 提升很大,很多 Vue 2 中的数据响应式陷阱都被解决了(比如数组索引、新增属性等),但依然存在一些可能导致“响应式丢失”的情况。 🚨 Vue…...
每日一练(4~23):特别数的和
算法:枚举 题目 题目描述 小明对数位中含有 2、0、1、9 的数字很感兴趣(不包括前导 0),在 1 到 40 中这样的数包括 1、2、9、10 至 32、39 和 40,共 28 个,他们的和是 574。 请问,在 1 到 n…...
AR行业应用案例与NXP架构的结合
1. 工业巡检AR头盔 场景示例:宁德核电基地使用AR智能头盔进行设备巡检,通过实时数据叠加和远程指导,将工作效率提升35%。头盔需处理传感器数据、图像渲染和低延迟通信1。 NXP架构支持: 协处理器角色:NXP i.MX RT系列M…...

C# 类型、存储和变量(值类型引用类型)
本章内容 C#程序是一组类型声明 类型是一种模板 实例化类型 数据成员和函数成员 预定义类型 用户定义类型 栈和堆 值类型和引用类型 变量 静态类型和dynamic关键字 可空类型 值类型引用类型 数据项的类型定义了存储数据需要的内存大小及组成该类型的数据成员。类型还决定了对象…...

智慧校园从配电开始:AISD300为校园安全加上智能防护罩
安科瑞刘鸿鹏 摘要 随着校园用电需求不断上升及其安全保障要求的提高,传统低压配电系统已逐渐难以满足现代校园的安全与智能化管理需求。本文基于安科瑞电气推出的AISD300系列三相智能安全配电装置,探讨其在校园电力系统中的应用优势及关键技术特性。…...
如何创建极狐GitLab 议题?
极狐GitLab 是 GitLab 在中国的发行版,关于中文参考文档和资料有: 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 创建议题 (BASIC ALL) 创建议题时,系统会提示您输入议题的字段。 如果您知道要分配给议题的值,则可…...
如何将极狐GitLab 合并请求导出为 CSV?
极狐GitLab 是 GitLab 在中国的发行版,关于中文参考文档和资料有: 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 导出合并请求为 CSV (BASIC ALL) 将从项目的合并请求中收集的所有数据导出到逗号分隔值(CSV)文件中。…...

一 、环境的安装 Anaconda + Pycharm + PaddlePaddle
《从零到一实践:系统性学习生成式 AI(NLP)》 一 、环境的安装 Anaconda Pycharm PaddlePaddle 1. Anaconda 软件安装 Anaconda 软件安装有大量的教程,此处不在说明,安装完成之后界面如下: 2. 创建 Anaconda 虚拟环境 Paddl…...

十倍开发效率 - IDEA插件之 Maven Helper
0X00 先看效果 第一个选项表示存在冲突的依赖,可以看到图片中 mysql 的连接依赖发生了冲突,在低版本的上面直接右键选择 Exclude,冲突的依赖就被解决掉了。 0X01 安装 在 Plugins 中直接搜索 Maven Helper,选择第一个进行安装&am…...
Go语言和Python 3的协程对比
Go语言和Python 3都支持协程(concurrent coroutines),但它们的实现机制、使用方式、调度方式和性能表现差异很大。下面是对比分析: 一、基本概念对比 特性Go 协程(goroutine)Python3 协程(asyn…...

人机共跑,马拉松人型机器人同跑
马拉松比赛对人形机器人来说,是一场对硬件极限的测试,涉及机械、传感器、能源管理等多个方面。用户问的是硬件方面的考察和改进,这意味着我的回答需要聚焦于硬件性能,而不是算法或软件的优化。 对人形机器人硬件的考研 机械结构与…...

策略模式:动态切换算法的设计智慧
策略模式:动态切换算法的设计智慧 一、模式核心:定义一系列算法并可相互替换 在软件开发中,常常会遇到需要根据不同情况选择不同算法的场景。例如,在电商系统中,根据不同的促销活动(如满减、折扣、赠品&a…...

uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网
一、AP配网技术原理 1.1 配网模式选择 AP配网(SoftAP模式)是IoT设备配网成功率最高的方案之一 1、其核心原理: 设备端:启动AP模式(如SSID格式YC3000_XXXX,默认IP192.168.4.1)手…...

离线-DataX
基本介绍 DataX 是阿里云 DataWorks数据集成的开源版本,在阿里巴巴集团内被广泛使用的离线数据同步工具/平台,它是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源…...
在Ubuntu上查看PCL(Point Cloud Library)的版本
在Ubuntu上查看PCL(Point Cloud Library)的版本可以通过终端运行命令pcl_viewer --version来实现。该命令将显示PCL库的版本号。 另外,你也可以使用以下命令在终端中查看PCL的版本号: 方法一: dpkg -l | grep libpc…...
RESTful学习笔记(一)
Web发展 一、API 程序硬件接口(Application Programming Interface),是预先定义好的逻辑函数,软件系统不同组成部分衔接的约定,直接调用函数,无序访问代码细节,分为SDK和Web应用接口两类 SDK…...
【汽车ECU电控数据管理篇】S19文件格式解析篇章
一、S19格式是啥 在电控文件管理的初期阶段,我首次接触到的是 A2L 和 HEX 文件。其中,A2L 文件主要承担着描述性功能,它详细地描述了各种参数和配置等相关信息。而 HEX 文件则是一种刷写文件,其内部明确记录了具体的地址以及对应的…...

第5课:对象与类——JS的“信息收纳盒”
生活从不会亏待每一个努力向上的人,愿你带着满腔热忱,无畏前行,用汗水书写青春的华章,用拼搏铸就人生的辉煌,今日的每一份付出,都将是未来成功的基石! 欢迎来到「JavaScript 魔法学院」第 5 课…...

xshell 登录验证失败解决
产生原因:检查防火墙、selinux 、网络模式、对外是否能ping外网 systemctl status firewalld cat /etc/selinux/config #disabled ping 223.5.5.5 ping 8.8.8.8 ping www.baidu.com 一、检查网络连接 确认虚拟机是否在线: 首先,确保虚…...

AI 赋能 3D 创作!Tripo3D 全功能深度解析与实操教程
大家好,欢迎来到本期科技工具分享! 今天要给大家带来一款革命性的 AI 3D 模型生成平台 ——Tripo3D。 无论你是游戏开发者、设计师,还是 3D 建模爱好者,只要想降低创作门槛、提升效率,这款工具都值得深入了解。 接下…...

AI书籍大模型微调-基于亮数据获取垂直数据集
大模型的开源,使得每位小伙伴都能获得AI的加持,包括你可以通过AIGC完成工作总结,图片生成等。这种加持是通用性的,并不会对个人的工作带来定制的影响,因此各个行业都出现了垂直领域大模型。 垂直大模型是如何训练出来…...
Vue3 + Vite + TS,使用 ExcelJS导出excel文档,生成水印,添加背景水印,dom转图片,插入图片,全部代码
Vue3 Vite TS,使用 ExcelJS导出excel文档,生成水印,添加背景水印,dom转图片,插入图片,全部代码 ExcelJS生成文档并导出导出表头其他函数 生成水印设置文档的背景水印dom 转图片插入图片全部代码 ExcelJS 读取&#…...

Kafka命令行的使用/Spark-Streaming核心编程(二)
Kafka命令行的使用 创建topic kafka-topics.sh --create --zookeeper node01:2181,node02:2181,node03:2181 --topic test1 --partitions 3 --replication-factor 3 分区数量,副本数量,都是必须的。 数据的形式: 主题名称-分区编号。 在…...

2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
机器学习入门 前言 说实话,机器学习想学好真心不易,很多时候都感觉自己学得云里雾里。以前一段时间自己为了完成毕业设计,在机器学习的理论部分并没有深究,仅仅通过TensorFlow框架力求快速实现模型。现在来看,很多时候…...

SQL 时间转换的CONVERT()函数应用说明
目录 1.常用查询使用的几个 2.其他总结 1.常用查询使用的几个 SELECT CONVERT(VARCHAR, GETDATE(), 112) SELECT CONVERT(VARCHAR, GETDATE(), 113)SELECT CONVERT(VARCHAR, GETDATE()-1, 112) SELECT CONVERT(VARCHAR, GETDATE()-1, 113) 2.其他总结 SELECT CONVERT(VARCHA…...
高企复审奖补!2025年合肥市高新技术企业重新认定奖励补贴政策及申报条件
一、合肥市高新技术企业重新认定奖励补贴政策 (一)高新区高新技术企业重新认定复审补贴奖励 重新认定为国家高新技术企业的给予5万元一次性奖励。 (二)经开区高新技术企业重新认定复审补贴奖励 对重新认定的企业,给…...
手机端本地服务与后端微服务的技术差异
以下是手机内部本地服务与后端微服务架构及通信协议的对比分析,结合两者的核心设计差异与技术实现特点展开: 一、架构设计对比 维度手机端本地服务后端微服务核心目标资源效率、离线优先、动态更新高并发处理、分布式事务、服务治理服务拆分粒度按功能…...

SystemWeaver详解:从入门到精通的深度实战指南
SystemWeaver详解:从入门到精通的深度实战指南 文章目录 SystemWeaver详解:从入门到精通的深度实战指南一、SystemWeaver环境搭建与基础配置1.1 多平台安装全流程 二、新手必学的十大核心操作2.1 项目创建全流程2.2 建模工具箱深度解析 三、需求工程与系…...
高光谱相机在工业检测中的应用:LED屏检、PCB板缺陷检测
随着工业检测精度要求的不断提升,传统机器视觉技术逐渐暴露出对非可见光物质特性识别不足、复杂缺陷检出率低等局限性。高光谱相机凭借其独特的光谱分析能力,为工业检测提供了革命性的解决方案。以下结合中达瑞和VIX系列推扫式高光谱相机的技术特点与实际…...