第二大脑

主题

2026-08-24
449
1.8m

概念卡片：Axios 数据请求 ​

一句话机制：Axios 是基于 Promise 的 HTTP 客户端，封装了 XHR，提供请求/响应拦截器、超时、取消、自动 JSON 转换等；相比原生 XHR（配置混乱）、jQuery-Ajax（要引整个 jQuery）、Fetch（low-level、错误处理麻烦），Axios 是实际项目里最省心的选择。

网络请求方案对比 ​

方案问题
原生 XHR配置/调用混乱，很少直接用
jQuery-Ajax为用 ajax 引整个 jQuery，不划算
Fetchlow-level：自己配 Header、404/500 不 reject、默认不带 cookie、不支持取消/进度
Axios拦截器 + 超时 + 取消 + 自动 JSON，开箱即用

关键代码示例 ​

js
import axios from 'axios'

const http = axios.create({ baseURL: '/api', timeout: 10000 })  // 统一配置

// 请求拦截器：统一注入 token
http.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  return config
})

// 响应拦截器：统一处理错误
http.interceptors.response.use(
  res => res.data,
  err => { console.error('请求失败', err.response?.status); return Promise.reject(err) }
)

// 使用
const data = await http.get('/users')          // async/await

不变量（必须成立的约束） ​

  • Axios 返回 Promise，用 .then/.catch 或 async/await 处理。
  • 拦截器（interceptors.request/response）统一处理 token 注入、错误提示。
  • Axios 对 HTTP 非 2xx 状态码会 reject（区别于 Fetch——Fetch 只有网络错误才 reject）。
  • 统一配 baseURL / timeout / 默认 headers，避免每个请求重复写。

踩坑案例 ​

  • 现象：用 Fetch 写请求，接口返回 404/500 却走了成功分支。 原因：Fetch 只有网络错误才 reject，HTTP 状态码错误不会。解决：手动 if (!res.ok) throw ...，或改用 axios。

常见误解 ​

  • 以为 Fetch 和 Axios 的错误处理一样 → 处理逻辑不同，axios 对非 2xx 直接 reject。

关联 ​

  • 总览：React技术栈总览
  • 源：B40-资源/语雀-Java开发/前端技术/✅React全家桶/‍♂️React整合axios
最近更新