在我们日常的开发工作中，与 API 进行交互无疑是构建现代 Web 应用的核心。你是否曾经想过，从早期的 XML 演进到今天的流式 AI 响应，这背后发生了多少技术变革？随着我们步入 2026 年，前端开发的格局已经不再仅仅是简单的“请求-响应”，而是迈向了智能化、边缘化和全栈类型安全的新纪元。
在本文中，我们将不仅回顾经典的四种 JavaScript API 调用方式，还会深入探讨在 AI 原生和现代化工程标准下，我们如何重构这些基础操作。我们不仅仅是在写代码，更是在与数据进行“对话”。让我们重新审视这些熟悉的概念，并注入 2026 年的前沿开发理念。
1. 使用 XMLHttpRequest (XHR) 发起 API 请求
历史背景与现状
XMLHttpRequest (XHR) 是一切的开端。虽然在 2026 年，我们在新项目中很少直接使用它，但理解 XHR 依然至关重要。为什么？因为许多遗留系统依然依赖于它，而且它是我们理解浏览器网络请求生命周期（如状态码变化、上传下载进度）的基石。
实际应用场景
在我们最近维护的一个遗留电商平台项目中，我们需要实现一个带有精确进度条的文件上传功能。虽然现代的 Fetch API 也能通过 Streams 实现类似功能，但在某些旧版浏览器兼容性要求极高的场景下，XHR 的 upload.onprogress 依然是最稳健的解决方案。
代码示例与深度解析
让我们来看一个封装良好的 XHR 调用示例。为了符合现代开发习惯，我们将其封装为 Promise 形式，以便于在 async/await 语法中调用：
// 定义一个基于 XHR 的 API 调用封装函数
function makeXHRRequest(method, url, data) {
return new Promise((resolve, reject) => {
// 步骤 A：创建 XMLHttpRequest 对象的实例
const xhr = new XMLHttpRequest();
// 步骤 B：初始化请求
// 第三个参数 ‘true‘ 表示这是一个异步请求，不会阻塞主线程
xhr.open(method, url, true);
// 步骤 C：设置响应类型（可选）
// 这里的逻辑告诉我们：如果知道服务器返回 JSON，最好提前设置
if (url.endsWith(‘.json‘) || method !== ‘GET‘) {
xhr.setRequestHeader(‘Content-Type‘, ‘application/json‘);
}
// 步骤 D：监听请求状态变化
xhr.onload = function() {
// 我们会首先检查 HTTP 状态码
if (xhr.status >= 200 && xhr.status console.log(‘XHR Data:‘, data))
.catch(err => console.error(‘XHR Error:‘, err));
深度解析：
在这个例子中，我们并没有直接裸写 XHR，而是将其包装在一个 Promise 中。这是处理旧技术的最佳实践——“适配器模式”。这样，我们可以在不破坏旧代码逻辑的情况下，让 XHR 拥有现代 API 的调用体验。
2. 使用 Fetch() 方法发起 API 请求
现代标准与流式处理
Fetch API 已经成为现代浏览器的事实标准。它基于 Promise 构建，语法简洁。但在 2026 年，我们对 Fetch 的使用已经不仅仅是 fetch().then().json() 那么简单。随着 AI 应用的普及，流式传输 成为了主流。当我们与 LLM（大语言模型）交互时，我们通常不是等待整个回答生成完毕，而是像 ChatGPT 那样逐字显示。
代码示例：标准 Fetch 与流式处理
让我们先看一个企业级的标准 Fetch 封装，处理了常见的错误边界和重试逻辑：
/**
* 增强型的 Fetch 请求封装
* 特性：自动重试、超时控制、错误规范化
*/
async function enhancedFetch(url, options = {}, retries = 3) {
const { timeout = 8000, ...fetchOptions } = options;
for (let i = 0; i controller.abort(), timeout);
fetchOptions.signal = controller.signal;
// 发起请求
const response = await fetch(url, fetchOptions);
clearTimeout(timeoutId);
// 检查 HTTP 状态，Fetch 不会像 Axios 那样自动抛出 4xx/5xx 错误
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}
// 假设我们主要处理 JSON 数据
return await response.json();
} catch (error) {
// 如果是最后一次尝试，直接抛出错误
if (i === retries - 1) throw error;
// 简单的指数退避策略
const delay = Math.pow(2, i) * 1000;
console.log(`Retrying... attempt ${i + 1}`);
await new Promise(res => setTimeout(res, delay));
}
}
}
// 调用示例
enhancedFetch(‘https://api.2026-service.com/products‘)
.then(data => console.log(‘Product Data:‘, data))
.catch(err => console.error(‘Fetch failed after retries:‘, err));
进阶技巧：处理流式响应
现在，让我们思考一个场景：你正在构建一个 AI 助手界面，后端是一个返回 SSE（Server-Sent Events）或简单流的 LLM 端点。普通的 await response.json() 是行不通的，因为数据还没加载完。
async function fetchLLMStream(prompt) {
const response = await fetch(‘https://api.ai-service.com/generate‘, {
method: ‘POST‘,
headers: { ‘Content-Type‘: ‘application/json‘ },
body: JSON.stringify({ prompt })
});
// 检查是否支持流式读取
if (!response.body) {
throw new Error(‘ReadableStream not supported‘);
}
// 获取 reader
const reader = response.body.getReader();
const decoder = new TextDecoder(‘utf-8‘);
let result = ‘‘;
while (true) {
// 读取数据流的一个片段
const { done, value } = await reader.read();
if (done) {
console.log(‘Stream finished‘);
break;
}
// 解码二进制数据块并追加到结果中
const chunk = decoder.decode(value, { stream: true });
result += chunk;
// 实时 UI 更新（比如打印到控制台或追加到 DOM）
console.log(‘Received chunk:‘, chunk);
}
return result;
}
这段代码展示了我们在处理 AI 交互时的核心模式。通过 reader.read() 循环，我们实现了数据的实时处理，这对于提升用户体验至关重要。
3. 使用 Axios 发起 API 请求
为什么在 2026 年依然选择 Axios？
虽然 Fetch 很强大，但 Axios 依然是企业级项目的首选。原因在于它的拦截器机制和自动数据转换。在大型应用中，我们需要在每个请求头中注入 Auth Token，或者统一处理 401 未授权跳转登录。用 Fetch 做这些需要大量的封装代码，而 Axios 开箱即用。
生产环境最佳实践
在我们团队的一个金融科技项目中，安全性要求极高。我们使用 Axios 来处理请求签名和响应加密。
import axios from ‘axios‘;
// 创建一个独立的 Axios 实例
// 这样我们可以隔离配置，避免污染全局默认设置
const apiClient = axios.create({
baseURL: ‘https://api.secure-bank.com/v1/‘,
timeout: 5000, // 设置超时时间
headers: {
‘X-Custom-Header‘: ‘foobar‘,
‘Content-Type‘: ‘application/json‘
}
});
// 请求拦截器：在请求发送前执行
apiClient.interceptors.request.use(
config => {
// 在我们发出请求前，从本地存储动态获取 Token
const token = localStorage.getItem(‘authToken‘);
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 记录请求日志，便于调试
console.log(`Sending request to ${config.url}`);
return config;
},
error => {
// 处理请求错误（例如配置写错了）
return Promise.reject(error);
}
);
// 响应拦截器：在数据返回给 .then() 之前执行
apiClient.interceptors.response.use(
response => {
// 我们可以在这里统一预处理数据
// 比如：response.data = response.data.payload;
return response;
},
error => {
// 集中处理全局错误
if (error.response && error.response.status === 401) {
// 如果 Token 过期，跳转回登录页
console.warn(‘Token expired, redirecting...‘);
window.location.href = ‘/login‘;
}
return Promise.reject(error);
}
);
// 使用封装好的 client 发起请求
apiClient.get(‘/accounts/details‘)
.then(res => console.log(res.data))
.catch(err => console.error(‘Axios handled error:‘, err));
关键点解释：
我们注意到，使用 interceptors（拦截器）可以将横切关注点（如认证、日志、错误处理）从业务逻辑中剥离出来。这种关注点分离是构建可维护大型应用的关键。
4. 使用 jQuery AJAX 发起 API 请求
时代的眼泪还是特定场景的利器？
坦率地说，在 2026 年启动一个新的纯 JavaScript 项目时，我们不建议你为了 AJAX 而引入整个 jQuery 库。然而，在一些维护旧的 CMS（如 WordPress 插件开发）或传统的内部管理后台时，你依然会遇到它。
如果你必须使用它，请确保你的代码结构清晰，避免陷入“回调地狱”。
// 使用 jQuery AJAX 的 Promise 风格
function getProductDetails(productId) {
return $.ajax({
url: `/api/products/${productId}`,
method: ‘GET‘,
dataType: ‘json‘,
timeout: 3000
});
}
// 调用
getProductDetails(101)
.done(function(data) {
console.log(‘jQuery Success:‘, data.name);
})
.fail(function(xhr, status, error) {
console.error(‘jQuery Error:‘, error);
});
虽然代码很简洁，但请记住，jQuery 并不支持现代的 async/await 语法需要一些 Polyfill 或者手动 Promise 化。我们的建议： 如果可能，逐步将这部分代码重构为 Fetch 或 Axios。
5. 2026 技术前瞻：智能化与类型安全
从“调用”到“协作”
随着 Agentic AI（自主 AI 代理）的兴起，我们看待 API 的视角正在发生变化。在未来，我们不仅仅是写死 URL，而是让我们的 AI 编程伙伴（如 GitHub Copilot 或 Cursor）帮助我们生成 API 调用代码。
T-RPC 与 GraphQL：超越 REST
如果你觉得手动管理 fetch(‘...‘) 很繁琐，你应该关注 tRPC 或 GraphQL。
- tRPC: 如果你的前后端都使用 TypeScript，tRPC 可以让你完全不需要定义 API 接口。你可以像调用普通函数一样调用后端接口，所有的类型都是自动推断的。这消除了“API 这一层”的摩擦。
- GraphQL: 允许客户端精确声明它需要哪些数据。这解决了 REST API 中“over-fetching”（获取了太多用不到的数据）或“under-fetching”（数据不够，需要再次请求）的问题。
示例：tRPC 的魅力
想象一下，不再是：
// 传统方式，你需要手动定义类型
const res = await fetch(‘/api/user‘);
const user = await res.json(); // user 的类型是 any
而是：
// tRPC 方式，类型完全自动推导
const user = await trpc.user.query();
// TypeScript 精确知道 user 的名字、年龄等属性
这种 End-to-End Type Safety（端到端类型安全）是 2026 年前端工程化的圣杯，它极大地减少了运行时错误。
6. 决策指南：你应该选择哪种方式？
在项目启动会上，我们经常会讨论这个问题。以下是我们在实战中总结的决策路径：
- 项目使用纯 TypeScript / Next.js / Vite，且追求极致的开发体验？
* 首选： tRPC。这是现代化的终极方案。
- 项目是标准的 RESTful API，需要稳定、广泛的支持和强大的拦截功能？
* 首选： Axios。它是企业级开发的基石。
- 项目依赖原生浏览器能力，不想增加包体积，或者涉及流式 AI 交互？
* 首选： Fetch API。原生、轻量、支持流。
- 维护遗留系统（IE 兼容）或极其特殊的旧项目？
* 首选： XHR 或 jQuery AJAX（作为临时过渡）。
7. 性能优化与调试：我们的实战经验
不要忽视缓存
在 2026 年，网络速度虽然变快了，但数据量也变大了。合理使用 HTTP 缓存头或者 Service Worker 缓存策略至关重要。
在使用 Fetch 时，我们可以控制缓存：
fetch(‘https://api.example.com/data‘, {
cache: ‘force-cache‘ // 强制使用浏览器缓存
});
调试技巧
如果你使用 VS Code 或 Cursor，不要只在 INLINECODE6f832234 中打印响应。利用 Source Maps 和 Network 面板。如果是调试异步逻辑，学会使用断点调试 Promise 链中的 INLINECODEd7a8b770 语句，效率远高于打印日志。
总结
JavaScript API 调用的演进史，实际上就是前端工程从简单脚本演变为复杂应用架构的历史。从 XHR 的回调地狱，到 Fetch 的流式处理，再到 Axios 的工程化封装，以及未来 tRPC 的类型安全，我们的工具箱越来越丰富。
在选择技术方案时，没有银弹。关键在于理解你的团队、你的项目需求以及未来的维护成本。希望这篇文章能帮助你做出更明智的决定，让你的代码在 2026 年依然保持优雅和高效。