Axios：拦截器与基础 URL
使用 baseURL 创建 Axios 实例，在请求拦截器中附加身份验证令牌，并在响应拦截器中处理 4xx/5xx 错误。
Axios：拦截器与基础 URL 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
为什么使用 Axios
Axios 是一个基于 XMLHttpRequest 构建的流行 HTTP 客户端。它提供以下功能：自动处理 JSON、请求/响应拦截器、baseURL 配置、超时以及请求取消令牌。许多团队仍然更喜欢使用它，而不是 fetch。
安装 Axios
通过 npm 安装。浏览器压缩包的大小约为 14KB。
npm install axios基本 GET 和 POST
Axios 会自动将 JSON 正文转换为字符串，并自动解析 JSON 响应——无需手动调用 JSON.stringify 或 .json()。
import axios from 'axios';
const { data } = await axios.get('/api/users');
console.log(data); // already parsed
const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);创建 Axios 实例
为您的接口创建一个已配置的实例，避免在每次调用时重复填写基础网址、标头和超时设置。
import axios from 'axios';
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});
// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });请求拦截器：身份验证令牌
在每个请求中注入身份验证令牌，无需重复编写相同代码。
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});响应拦截器：全局错误处理
集中处理所有响应的错误：收到 401 时重定向，收到 5xx 时显示提示消息，等等。
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
window.location.href = '/login';
}
if (error.response?.status >= 500) {
toast.error('Server error. Please try again.');
}
return Promise.reject(error);
}
);收到 401 时刷新令牌
使用响应拦截器检测 401，刷新令牌，然后透明地重试原始请求。
api.interceptors.response.use(null, async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
originalRequest.headers.Authorization = `Bearer ${newToken}`;
return api(originalRequest); // retry
}
return Promise.reject(error);
});URL 参数与查询
Axios 接受一个 params 对象，会自动将其序列化为查询字符串。
const { data } = await api.get('/search', {
params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2超时设置
设置请求超时时间，避免请求在响应缓慢的服务器上一直挂起。
api.get('/slow-endpoint', { timeout: 5000 })
.catch(err => {
if (err.code === 'ECONNABORTED') {
console.log('Request took too long');
}
});取消请求
请使用 AbortController（现代 Axios）或 CancelToken（旧版 API）。
const controller = new AbortController();
api.get('/big-data', { signal: controller.signal })
.catch(err => {
if (axios.isCancel(err)) console.log('cancelled');
});
controller.abort();错误对象结构
Axios 错误可能包含 error.response（服务器返回了错误状态码）、error.request（未收到响应），或者两者都没有（请求设置失败）。
Axios 与 Fetch——何时选择
Axios：API 更简洁，内置拦截器，错误处理更简单。Fetch：原生支持，打包体积更小，并支持现代流式处理。新项目通常选择 fetch 加轻量封装；已有 Axios 项目很少迁移。
快速检查
Axios 的哪项功能可以让您为每一个请求添加 Authorization 标头，而不必修改每次单独调用？
回顾：Axios
使用 axios.create() 创建带有 baseURL 和 timeout 配置的实例。响应会自动解析为 JSON（res.data）。请求拦截器会附加令牌；响应拦截器会处理错误并刷新令牌。使用 params 对象构造查询字符串。使用 AbortController 取消请求。追求简洁时选择 Axios；追求更小的打包体积时选择 fetch 加封装层。
常见问题解答
「Axios：拦截器与基础 URL」课时是免费的吗？
是的 — 「Axios：拦截器与基础 URL」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「Axios：拦截器与基础 URL」这节课中我会学到什么？
使用 baseURL 创建 Axios 实例，在请求拦截器中附加身份验证令牌，并在响应拦截器中处理 4xx/5xx 错误。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「Axios：拦截器与基础 URL」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。