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

让我们从了解axios开始到封装axios（ts＋react开发情况下）

news 2026/5/11 23:07:43

1. 一句话解释什么是 Axios

Axios 是一个前端用来“发网络请求”的工具，用来前后端联系
它的主要工作，就是帮你把前端（你的网页）和后端（服务器/数据库）连接起来，实现数据的传递。

2. 打个比方：Axios 就是一个“快递员”

  • 你的网页（前端）= 你的家

  • 服务器（后端）= 远方的仓库（比如淘宝的仓库）

  • 数据= 快递包裹

如果你想从仓库拿一个包裹（获取商品信息），或者往仓库发一个包裹（提交注册信息），你需要找人帮你跑腿。
Axios 就是你雇佣的这个“快递员”。
你只需要告诉他：“去某某地址，帮我拿个东西”，他就会跑过去，把东西拿回来交给你；如果中途出了问题（地址填错了、仓库关门了），他也会回来向你报告错误。

3 .最核心的方法：GET 和 POST

就像快递有“收件”和“寄件”一样，Axios 最常用的有两个方法：

  • GET 请求（收件）：向服务器要数据。比如：获取今天的天气、获取文章列表。

  • POST 请求（寄件）：向服务器提交数据。比如：提交登录账号和密码、发布一条朋友圈。

假设我们现在要在网页里用 Axios，最简单的方法是在 HTML 文件里引入它。

第一步：引入 Axios

（如果你以后用 Vue 或 React，会用 npm install axios 下载它，但现在我们直接用网页链接引入即可）

<!-- 在HTML文件的<head>标签里加入这行代码，就请来了快递员 --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

第二步：发一个 GET 请求（获取数据）

我们将向一个免费的测试网站（JSONPlaceholder）请求一篇文章的数据。

// 告诉 Axios：去这个网址帮我拿数据（GET） axios.get('https://jsonplaceholder.typicode.com/posts/1') .then(function (response) { // .then 意思是：如果成功拿到了，就执行这里的代码 console.log("拿到的数据是：", response.data); }) .catch(function (error) { // .catch 意思是：如果中途出错了（比如网址填错），就执行这里的代码 console.log("哎呀，出错了：", error); });

第三步：发一个 POST 请求（提交数据）

假设我们要向服务器注册一个新用户：

// 准备好要寄出去的数据（包裹） let newUser = { name: '小明', age: 18 }; // 告诉 Axios：去这个网址，把 newUser 这个包裹交过去（POST） axios.post('https://jsonplaceholder.typicode.com/posts', newUser) .then(function (response) { console.log("提交成功！服务器返回的确认信息是：", response.data); }) .catch(function (error) { console.log("提交失败：", error); });

4.Axios实例

通过axios.create()方法可以创建一个axios的实例，通过axios实例同样可以发送请求。

想一下，为什么需要axios实例?

通常在一个业务系统内会存在很多的接口，接口会存在一些通用的全局配置，比如请求头中包含统一的鉴权信息，接口入参里统一传递登录用户信息。如果在每个接口里都配置一遍，会导致接口配置很冗余。
而axios实例是可以完成通用配置的，后续通过同一个实例发送的请求都会生效。

常用全局配置（请求配置优先级>实例配置>全局配置）。

·baseURL:基础的url前缀，和url参数组成完整的请求url

·timeout:超时时间

·header:请求头

例子

一、先做：全局配置 axios（纯净版）

新建一个文件：request.js只做 2 件事：

  1. 配置基础地址
  2. 创建一个 axios 实例
// 1. 引入 axios import axios from "axios"; // 2. 创建全局配置的 axios 实例 // 以后所有请求都用这个 instance const instance = axios.create({ // 🔥 全局基础URL（最重要！） // 以后写接口只需要写 /personalized，不用写一长串地址 baseURL: "http://localhost:4000", // 请求超时时间（可选） timeout: 5000 }); // 3. 导出给页面用 export default instance;

二、配置完了，怎么用 GET？

以前写法（麻烦）

axios.get("http://localhost:4000/personalized")

现在全局配置后（简洁）

import request from "./request.js"; request.get("/personalized").then((res) => { console.log("数据：", res.data); });

为什么变短了？

因为baseURL 已经自动帮你加上了

plaintext

request.get("/personalized") = axios.get("http://localhost:4000/personalized")

三、配置完了，怎么用 POST？

以前写法

axios.post("http://localhost:4000/login", { username: "zs", password: "123" })

现在全局配置后（一样简洁）

import request from "./request.js"; request.post("/login", { username: "zs", password: "123" }).then((res) => { console.log("返回结果：", res.data); });

四、全局配置到底帮你做了什么？（只讲重点）

  1. 统一管理地址以后服务器地址变了，只需要改request.js一处，不用改所有接口。

  2. 所有请求共享配置比如超时、请求头...

  3. 代码更干净不用每次写一长串http://localhost:4000

5.什么是拦截器？

在真实开发中，网页可能要发几十个、上百个网络请求。

  • 每次寄件，你都要给包裹贴邮票（添加身份验证/Token）。

  • 每次收件，你都要拆开厚厚的纸箱，只拿里面的东西（提取数据），甚至还要看看包裹有没有破损（处理报错）。

如果每次发请求你都手动写一遍这些代码，岂不是累死？
拦截器（Interceptor），就是你雇佣的两个“门卫大爷”，一个管出门（请求拦截器），一个管进门（响应拦截器）。你只需要给门卫交代一次规则，以后快递员每次进出，门卫都会自动帮你处理好。

1. 请求拦截器（Request Interceptor）—— 管“出门”的门卫大爷

作用时间：在快递员（Axios）拿着包裹准备离开你的网页去服务器之前。
比喻：快递员走到大门口，门卫大爷拦住他：“等一下！老板说了，现在寄快递都要戴个工牌，我给你挂上再走。”

最常见的用途：

  1. 自动加上“通行证”（Token）：你登录后，服务器会给你一个 Token（类似 VIP 卡）。以后每次请求都要带上它。有了拦截器，门卫大爷会自动往每个请求里塞入 Token，你就不用每次都手动写了。

  2. 显示“加载中”：门卫大爷看到快递员出门了，就在网页上转个圈圈提示用户“正在加载中...”。

2. 响应拦截器（Response Interceptor）—— 管“进门”的门卫大爷

作用时间：在快递员从服务器拿回包裹，交到你手里的代码（.then 或 await）之前。
比喻：快递员满头大汗跑回来，门卫大爷拦住他：“等一下！老板很忙，不想看那些包装盒。我帮你把外层纸箱拆了，只把里面的商品拿给老板。如果包裹在路上丢了或者地址是错的，我直接去告诉老板出错了。”

最常见的用途：

  1. 剥离无用的外包装：之前我们拿数据要写 response.data，因为 response 是 Axios 包装的纸箱。通过拦截器，我们可以直接把 data 取出来，以后你拿到的直接就是想要的数据。

  2. 全局处理错误：如果服务器返回报错（比如“登录已过期”），门卫大爷直接弹出提示框“请重新登录”，并且把网页跳回登录页。你就不需要在每个请求的 .catch() 里写一遍了。

6.拦截器怎么写？

一、先记住：拦截器写在全局 axios 实例下面

也就是你刚才的request.js里。

二、完整专业写法

文件：request.js

// 1. 引入 axios import axios from 'axios' // 2. 创建实例（全局配置） const service = axios.create({ baseURL: 'http://localhost:4000', timeout: 5000 }) // ========================================= // ✅ 【专业写法】请求拦截器 // ========================================= service.interceptors.request.use( (config) => { // 请求发送之前做的事 console.log('请求准备发送') // 比如：统一加 token const token = localStorage.getItem('token') if (token) { config.headers.token = token } return config // 必须返回 }, (error) => { // 请求错误 return Promise.reject(error) } ) // ========================================= // ✅ 【专业写法】响应拦截器 // ========================================= service.interceptors.response.use( (response) => { // 成功：直接返回 data，页面不用写 .data return response.data }, (error) => { // 统一错误处理 console.error('请求出错：', error) return Promise.reject(error) } ) export default service

三、我一句一句给你讲清楚（专业版解释）

1. 请求拦截器

service.interceptors.request.use( (config) => { // config = 请求的全部信息 // 你可以在这里： // 加请求头、加参数、加 token、加签名 return config // 必须 return，否则请求发不出去 }, (error) => { return Promise.reject(error) } )

作用：

  • 统一添加 token

  • 统一设置请求头

  • 统一处理公共参数

2. 响应拦截器

service.interceptors.response.use( (response) => { // 响应成功 return response.data // 直接返回数据 }, (error) => { // 响应失败（404、500、超时等） return Promise.reject(error) } )

作用：

  • 统一返回 data

  • 统一处理错误

  • 统一判断状态码

四、加完拦截器后，你的 GET / POST 变成这样（超级干净）

import request from './request' // GET request.get('/personalized').then(data => { console.log(data) // 直接拿到数据，不用写 res.data }) // POST request.post('/login', { username: 'zs', password: '123' }).then(data => { console.log(data) })

7、什么是请求头和token？

一、先看我们的代码（就看这一段）

// 请求拦截器 service.interceptors.request.use(config => { // 👇 这里就是往 请求头 里放 token const token = localStorage.getItem('token') if (token) { config.headers.token = token } return config })

我现在逐字逐句给你讲！

二、什么是 请求头 headers？

请求头 = 发给后端的【附加信息】

你发请求时，有两部分内容：

  1. 正文数据（账号密码、表单内容）

  2. 附加信息（我是谁、我登录了没、我发的是什么格式）

附加信息 就放在 请求头里！

在代码里：

config.headers

headers = 请求头

它是一个对象，用来放：

  • token
  • 内容类型
  • 客户端信息

三、什么是 token？（登录身份证）

token = 你登录后的【身份证 / 通行证】

流程：

  1. 你登录 → 后端给你一个字符串
  2. 这个字符串就是token
  3. 以后你访问需要登录的接口，必须带上它

四、代码里这句到底在干嘛？

config.headers.token = token

翻译成人话：

往请求头里，放上我的登录身份证！

http://www.jsqmd.com/news/508590/

相关文章：

  • Qwen-Image惊艳呈现：多语言图文混合内容理解与跨模态问答效果集
  • CLAP-htsat-fused参数详解：--gpus all与模型缓存挂载最佳实践
  • 寄存器同步机制与环形计数器设计实践
  • mysqlDML(数据操作)
  • 如何在5分钟内为Unity游戏添加专业级实时翻译
  • COMSOL平台下的变压器二维模型电磁-热耦合仿真效果：简单易操作，确保仿真结果与图示一致
  • 罗兰艺境生物医药GEO白皮书：让B2B制造业隐形冠军拥有自己的AI信任资产 - 罗兰艺境GEO
  • Qwen3-Reranker-0.6B与计算机网络技术结合：智能流量分析
  • Qwen3-32B-Chat部署教程：如何在现有K8s集群中部署该镜像并暴露Ingress服务
  • Neeshck-Z-lmage_LYX_v2应用案例：电商卖家如何批量生成商品场景图
  • SiameseAOE一键部署教程：基于Ubuntu20.04的快速环境搭建指南
  • 无人驾驶的安全论证与验证体系：从理论到现实的方法论
  • AirPodsDesktop：Windows平台AirPods体验增强方案全解析
  • Kimi新架构得马斯克点赞：解析注意力残差Attention Residuals
  • Qwen3.5-9B效果展示：Qwen3.5-9B在WebSRC网页截图理解任务中的DOM结构还原能力
  • 基于Xinference-v1.17.1的YOLOv8目标检测集成方案：工业质检实战指南
  • 插槽（Slot）实战：从默认插槽到作用域插槽
  • React 如何实现大数据量图表（性能优化指南）
  • LabVIEW利用窗口句柄直接操作第三方软件：超越模拟鼠标键盘，稳定应对分辨率变化的数据交互方式
  • 深入解析printf、fprintf、sprintf的应用场景与性能优化
  • 协议选型决策迫在眉睫，MCP在微服务网关场景下P99延迟降低62%——你还在用REST硬扛高并发？
  • 在能源行业，尤其是电力企业，实现机组级核算是精细化管理的核心要求——需要精确归集每台发电机组的收入、成本（燃料、折旧、维修等）和利润
  • Qwen3-0.6B-FP8入门指南：理解Qwen3双模式切换机制及如何通过prompt触发思维模式
  • Qwen3.5-9B零基础上手：从浏览器访问7860端口到首次图文问答全过程
  • Z-Image-Turbo-rinaiqiao-huiyewunv 效果展示：基于JavaScript的实时交互式图像生成Demo
  • AI审核如何守护游乐设施安全底线？IACheck成为检测报告智能审核新助手
  • FPGA实现LED呼吸灯：PWM调光原理与工程实践
  • 10-第10章-HTTP服务器与中间件
  • 03-Oracle索引深入：不只是“加个索引就快了“
  • DTK（DCU Toolkit）是海光信息为其DCU（深度计算处理器）开发的软件平台，与NVIDIA的CUDA没有严格的版本对应关系，但通过技术兼容实现了对CUDA生态的支持