从XHR到Fetch：Promise封装Ajax的奇幻之旅

2025年7月3日 14:51

大家好，我是你们的前端小伙伴Fogletter！今天我要和大家分享一个前端开发中非常经典的话题——Ajax请求的演进史，以及如何用Promise封装传统的XHR对象来模拟现代Fetch API的效果。

一、Ajax：前端开发的里程碑

还记得2005年，Google在Gmail和Google Maps中大规模使用Ajax技术时，整个Web开发界为之震撼的场景吗？Ajax（Asynchronous JavaScript and XML）彻底改变了Web应用的交互方式，让我们告别了整页刷新的时代。

1.1 传统XHR的"原始社会"

在ES6之前，我们只能使用XMLHttpRequest对象（简称XHR）来进行异步请求。看看这段"考古代码"：

const xhr = new XMLHttpRequest(); // 实例化
xhr.open('GET', 'https://api.github.com/users/fogletter/repos');
xhr.send(); // 发送请求

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4){
        const data = JSON.parse(xhr.responseText);
        document.getElementById('repos').innerHTML = 
            data.map(item => `<li>${item.name}</li>`).join('');
    }
}

这段代码有几个痛点：

回调地狱：当有多个依赖请求时，代码会形成金字塔形状
状态管理：需要手动检查readyState
错误处理：需要额外代码处理网络错误

1.2 readyState的五个阶段

XHR对象的状态变化很有意思，它经历了五个阶段：

0 (UNSENT): 代理被创建，但尚未调用 open() 方法
1 (OPENED): open() 方法已经被调用
2 (HEADERS_RECEIVED): send() 方法已经被调用，并且头部和状态已经可获得
3 (LOADING): 下载中；responseText 属性已经包含部分数据
4 (DONE): 下载操作已完成

我们通常只关心阶段4，也就是请求完成的时候。

二、Promise：异步编程的救星

随着前端应用越来越复杂，回调地狱问题日益严重。ES6引入的Promise成为了解决这一问题的利器。

2.1 Promise的三种状态

Promise对象代表一个异步操作的最终完成（或失败）及其结果值。它有三种状态：

pending: 初始状态，既不是成功，也不是失败
fulfilled: 意味着操作成功完成
rejected: 意味着操作失败

2.2 用Promise封装XHR

让我们用Promise来改造传统的XHR：

const getJSON = (url) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4){
                if(xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject(new Error(xhr.statusText));
                }
            }
        }
        xhr.onerror = function() {
            reject(new Error('Network Error'));
        }
    })
}

这样封装后，我们就可以像这样使用：

getJSON('https://api.github.com/users/fogletter/repos')
    .then(data => {
        document.getElementById('repos').innerHTML = 
            data.map(item => `<li>${item.name}</li>`).join('');
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

是不是清爽多了？这种链式调用的方式让代码更加线性化，易于理解和维护。

三、Fetch API：现代浏览器的原生支持

ES6不仅带来了Promise，还引入了更现代的Fetch API。Fetch基于Promise设计，提供了更强大、更灵活的功能。

3.1 Fetch的基本用法

fetch('https://api.github.com/users/fogletter/repos')
    .then(res => res.json())
    .then(data => {
        document.getElementById('repos').innerHTML = 
            data.map(item => `<li>${item.name}</li>`).join('');
    });

Fetch API的优点：

语法简洁，更符合现代JavaScript风格
内置Promise支持，无需额外封装
提供了Request和Response对象，功能更强大
默认不会接收或发送cookies，安全性更好

3.2 结合async/await使用

ES8引入的async/await语法让异步代码看起来像同步代码一样直观：

document.addEventListener('DOMContentLoaded', async() => {
    try {
        const result = await fetch('https://api.github.com/users/fogletter/repos');
        const data = await result.json();
        document.getElementById('repos').innerHTML = 
            data.map(item => `<li>${item.name}</li>`).join('');
    } catch (error) {
        console.error('请求失败:', error);
    }
});

这种写法几乎消除了所有回调，代码可读性大大提高。

四、为什么还要学习XHR？

虽然Fetch API已经很优秀了，但学习XHR和Promise封装仍然很有必要：

兼容性考虑：一些老旧项目或浏览器可能需要XHR
理解底层原理：了解XHR有助于深入理解网络请求机制
特殊需求：如上传进度监控等，Fetch API支持还不够完善
面试必备：很多面试官喜欢考察对底层原理的理解

八、最佳实践建议

现代项目优先使用Fetch API：语法简洁，功能强大
需要兼容性时使用Promise封装XHR：保证代码风格一致
始终处理错误：不要忽略.catch或try/catch
合理设置超时：避免请求长时间挂起
考虑使用拦截器：统一处理请求和响应

九、总结

从前端的异步请求发展史中，我们可以看到JavaScript语言的不断进化：

XHR时代：回调地狱，手动管理状态
Promise封装：链式调用，代码更清晰
Fetch API：原生Promise支持，语法更现代
async/await：同步写法，异步效果

理解这个演进过程不仅能帮助我们写出更好的代码，还能在面试中展现出对前端技术的深刻理解。记住，技术总是在不断进步的，今天的Fetch API也许明天就会被更优秀的方案取代，但核心的异步编程思想是不变的。

希望这篇笔记能帮助大家更好地理解Ajax和Promise封装！如果有任何问题，欢迎在评论区留言讨论。

阅读视图