前端数据请求终极对比：Ajax与Fetch API谁更强？一文看懂异步通信实战技巧

在现代Web开发中，动态交互页面离不开前后端的数据交换。当我们打开一个电商网站的商品列表、查看社交媒体的最新动态，或者提交一个表单时，背后都是前端通过异步请求从服务器获取数据并更新页面。实现这一功能的主流技术有两种：经典Ajax和HTML5引入的Fetch API。它们都能完成数据请求任务，但在设计理念和使用体验上有很大区别。本文将带你深入了解两者的工作原理、优缺点以及最佳实践。

一、传统Ajax：基于XMLHttpRequest的成熟方案

1.1 Ajax的基本概念

Ajax的全称是Asynchronous JavaScript and XML，虽然名字里带着XML，但在当今开发中，JSON早已取代XML成为最流行的数据格式。Ajax的核心是浏览器提供的XMLHttpRequest对象，它允许网页在不刷新整个页面的情况下与服务器交换数据，从而实现局部更新。比如你在搜索框输入关键词时，下拉联想列表就是通过Ajax实时获取后台数据并展示的。

1.2 使用XMLHttpRequest的完整流程

使用Ajax需要遵循一套固定的步骤，每一步都至关重要。首先，我们要创建一个XMLHttpRequest实例：

var xhr = new XMLHttpRequest();

接着，配置请求参数：指定HTTP方法（GET/POST）、目标URL以及是否异步（通常设为true）：

xhr.open('GET', '/api/users', true);

然后，注册事件监听器来处理请求状态变化。最常用的是onreadystatechange事件，当readyState变为4（表示请求完成）并且status在200-299范围内时，说明数据成功返回：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log('获取到的用户数据:', data);
    } else if (xhr.readyState === 4) {
        console.error('请求失败，状态码:', xhr.status);
    }
};

最后，发送请求：

xhr.send();

1.3 Ajax的痛点：回调地狱

虽然Ajax功能强大，但当我们需要连续请求多个接口时，就会陷入层层嵌套的回调函数中。比如先获取用户ID，再用这个ID查询订单详情，最后根据订单ID获取物流信息。这种代码结构被称为“回调地狱”，可读性极差，维护起来非常痛苦。

xhr1.onload = function() {
    var userId = JSON.parse(xhr1.responseText).id;
    var xhr2 = new XMLHttpRequest();
    xhr2.open('GET', '/api/orders?userId=' + userId);
    xhr2.onload = function() {
        var orderId = JSON.parse(xhr2.responseText).orderId;
        var xhr3 = new XMLHttpRequest();
        // ... 继续嵌套
    };
    xhr2.send();
};

二、Fetch API：现代浏览器原生支持的Promise方案

2.1 Fetch的基本用法

Fetch API是HTML5提供的新一代数据请求接口，它基于Promise设计，语法更加简洁。最基本的用法只需要一行代码：

fetch('/api/users')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('请求出错:', error));

这里有几个关键点需要注意：fetch()返回的是一个Promise对象，该Promise在请求成功时会resolve为一个Response对象。Response对象提供了多种方法将响应体转换成不同格式，其中最常用的是.json()方法，它会读取响应流并解析为JavaScript对象。

2.2 Fetch的错误处理陷阱

很多人以为Fetch的.catch()能捕获所有错误，其实不然。Fetch只有在网络故障（如断网、DNS解析失败）或请求被阻止时才会reject。对于HTTP错误状态码（如404、500），Fetch仍然会resolve，只是response.ok属性为false。所以我们必须手动检查状态码：

fetch('/api/users')
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP错误，状态码:' + response.status);
        }
        return response.json();
    })
    .then(data => { /* 处理数据 */ })
    .catch(error => { /* 处理网络错误或手动抛出的错误 */ });

2.3 Fetch的配置选项

Fetch的第二个参数是一个配置对象，可以设置请求方法、请求头、请求体等。例如发送POST请求并携带JSON数据：

fetch('/api/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username: 'admin', password: '123456' })
})
.then(response => response.json())
.then(result => console.log(result));

另外，如果需要携带Cookie（比如保持登录态），必须设置credentials: 'include'，因为Fetch默认不会发送Cookie。

三、async/await：让异步代码像同步一样优雅

3.1 基本语法

虽然Fetch配合Promise已经比Ajax好很多，但链式调用在处理复杂逻辑时仍然不够直观。ES2017引入的async/await语法彻底改变了这一局面。在async函数内部，我们可以使用await关键字等待Promise的结果，就像写同步代码一样：

async function getUsers() {
    try {
        const response = await fetch('/api/users');
        if (!response.ok) {
            throw new Error('请求失败');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('出错了:', error);
    }
}
getUsers();

3.2 解决多层依赖问题

现在来看前面那个让人头疼的多层嵌套例子，用async/await改写后变得清晰明了：

async function getLogisticsInfo() {
    try {
        const userRes = await fetch('/api/user');
        const user = await userRes.json();
        const orderRes = await fetch(`/api/orders?userId=${user.id}`);
        const order = await orderRes.json();
        const logisticsRes = await fetch(`/api/logistics?orderId=${order.orderId}`);
        const logistics = await logisticsRes.json();
        console.log(logistics);
    } catch (error) {
        console.error('获取物流信息失败:', error);
    }
}

每一行代码都在等待上一个请求完成，顺序清晰，错误统一由catch处理，再也不需要回调地狱。

3.3 并行请求优化

有时候我们需要同时发起多个不依赖的请求，这时可以用Promise.all配合await，提高效率：

async function loadDashboard() {
    try {
        const [users, products, orders] = await Promise.all([
            fetch('/api/users').then(r => r.json()),
            fetch('/api/products').then(r => r.json()),
            fetch('/api/orders').then(r => r.json())
        ]);
        renderDashboard(users, products, orders);
    } catch (error) {
        console.error('仪表盘数据加载失败');
    }
}

这样三个请求并发执行，总耗时取决于最慢的那个，而不是串行累加。

四、Ajax与Fetch的全面对比

从表中可以看出，Fetch在语法和可维护性上完胜Ajax，但Ajax在兼容性和请求取消方面仍有优势。如果你的项目需要支持老旧的IE浏览器，或者需要频繁取消请求（比如搜索框防抖），Ajax仍然是可靠的选择。

五、实际开发中的关键注意事项

5.1 跨域问题

当前端页面与后端接口不在同一个域名下时，浏览器会触发同源策略拦截请求。解决方案通常是后端配置CORS（跨域资源共享），在响应头中添加Access-Control-Allow-Origin字段。如果是简单请求（GET/POST且Content-Type为text/plain等），浏览器会直接发送；如果是预检请求（如自定义Header或PUT/DELETE），浏览器会先发一个OPTIONS请求确认许可。

5.2 JSON解析安全性

无论是使用JSON.parse()还是response.json()，如果服务器返回的不是合法JSON，都会抛出异常。因此一定要用try/catch包裹解析逻辑，或者在.catch中做兜底处理。例如：

fetch(url)
    .then(res => res.text()) // 先拿到原始文本
    .then(text => {
        try {
            return JSON.parse(text);
        } catch {
            console.error('返回数据不是合法JSON:', text);
            return null;
        }
    })

5.3 请求超时处理

Fetch本身没有超时设置，但可以通过AbortController结合setTimeout来实现：

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch(url, { signal: controller.signal })
    .then(response => response.json())
    .then(data => { clearTimeout(timeoutId); /* 处理数据 */ })
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('请求超时');
        }
    });

5.4 调试与日志记录

在开发环境中，建议在每个请求前后打印日志，便于追踪问题。可以在全局封装一个统一的请求函数，加入请求时间戳、状态码、响应体大小等信息，方便排查性能瓶颈。

六、总结：如何选择合适的技术方案

对于全新的前端项目，强烈推荐使用Fetch API配合async/await。它的代码更简洁、更易维护，而且现代浏览器（Chrome、Firefox、Safari、Edge）都已完美支持。如果你的项目需要兼容IE或者企业内部系统仍在使用老旧浏览器，那么XMLHttpRequest依然是稳妥之选。另外，如果你使用Vue、React等框架，它们的官方推荐或社区封装的请求库（如axios）本质上也是基于XMLHttpRequest或Fetch的二次封装，你可以根据框架生态来选择。

无论采用哪种方式，都要牢记跨域配置、数据解析安全、错误处理以及凭证传递这几个关键点。只有打好基础，才能构建出稳定高效的动态Web应用。希望本文的对比和示例能帮你理清思路，在实际开发中做出最适合自己的技术决策。

HTML5FetchAjaxJSON接口请求修改时间：2026-08-20 06:48:22