从 XMLHttpRequest 到 Fetch API：现代前端网络请求的演进与迁移指南

API 设计不直观
需要管理多个事件监听器 (onreadystatechange, onerror, ontimeout)，配置复杂，学习曲线陡峭。

功能限制
缺乏对现代 Web 特性（如流式处理、请求中断）的良好支持。

二、Fetch API 的设计理念与核心优势

2.1 Fetch API 的基本使用

// 基础的 Fetch 请求
fetch('/api/data').then(response => {
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    return response.json();
}).then(data => console.log('成功:', data)).catch(error => console.error('失败:', error));

2.2 Fetch 的核心设计优势

基于 Promise 的现代化 API

• 链式调用，避免回调地狱
• 统一的错误处理机制
• 更好的异步代码可读性

更精确的错误分类

fetch('/api/data').catch(error => {
    // 明确的错误类型
    if (error.name === 'TypeError') {
        console.error('网络错误或 CORS 问题');
    } else if (error.name === 'AbortError') {
        console.error('请求被取消');
    }
});

对现代 Web 特性的原生支持

• Service Worker 集成
• 流式数据处理
• 请求/响应流的直接访问

三、深度技术对比：XHR vs Fetch

3.1 响应处理机制对比

XHR 的响应处理

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        // 所有完成状态都进入这里
        if (xhr.status === 200) {
            // 成功处理
        } else {
            // 所有错误状态统一处理
        }
    }
};

Fetch 的响应处理

fetch(url).then(response => {
    // 关键区别：所有网络成功的请求都进入这里
    // 包括 200、404、500 等状态码
    if (response.ok) {
        // 只有 200-299 状态码进入这里
        return response.json();
    } else if (response.status === 304) {
        // 特殊处理缓存情况
        return handleNotModified();
    } else {
        // 其他 HTTP 错误状态
        throw new HttpError(response.status, response.statusText);
    }
}).catch(error => {
    // 只有网络层面的错误进入这里
    // 如 CORS 错误、DNS 解析失败、网络断开等
});

3.2 状态码处理的重大差异

response.ok 的真相

// Fetch 的 response.ok 行为
console.log(response.status); // 200 -> response.ok: true
console.log(response.status); // 201 -> response.ok: true
console.log(response.status); // 204 -> response.ok: true
console.log(response.status); // 304 -> response.ok: false // 注意！
console.log(response.status); // 404 -> response.ok: false
console.log(response.status); // 500 -> response.ok: false

这种设计让开发者能够更精确地处理不同的 HTTP 场景，特别是对 304 Not Modified 的特殊处理。

3.3 请求控制能力对比

XHR 的请求控制

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.timeout = 5000;
xhr.ontimeout = function() {
    console.log('请求超时');
};
// 但 XHR 无法真正中止一个超时请求

Fetch 的请求控制

const controller = new AbortController();
const signal = controller.signal;
// 设置超时
setTimeout(() => controller.abort(), 5000);
fetch('/api/data', { signal }).then(response => response.json()).catch(err => {
    if (err.name === 'AbortError') {
        console.log('请求被主动取消');
    }
});

四、实际问题解决：状态 0 的谜团

4.1 XHR 状态 0 的根本原因

XHR 的 readyState === 0 表示请求甚至没有成功发送出去，常见原因包括：

• CORS 跨域问题：浏览器安全策略阻止
• 网络层阻止：防火墙、代理拦截
• 代码逻辑错误：在 open() 和 send() 之间发生异常
• URL 格式错误：协议错误、主机名解析失败

4.2 Fetch 的改进方案

async function robustFetch(url, options = {}) {
    try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), options.timeout || 30000);
        const response = await fetch(url, {
            ...options,
            signal: controller.signal
        });
        clearTimeout(timeoutId);
        if (!response.ok) {
            throw new HttpError(response.status, response.statusText);
        }
        return await response.json();
    } catch (error) {
        // Fetch 提供更明确的错误信息
        if (error.name === 'AbortError') {
            throw new Error('请求超时');
        } else if (error.name === 'TypeError') {
            throw new Error('网络错误或 CORS 配置问题');
        } else {
            throw error;
        }
    }
}

五、完整迁移指南与最佳实践

5.1 渐进式迁移策略

创建兼容层

class ApiClient {
    constructor(baseURL = '') {
        this.baseURL = baseURL;
        this.useFetch = typeof fetch !== 'undefined';
    }

    async request(endpoint, options = {}) {
        const url = this.baseURL + endpoint;
        if (this.useFetch) {
            return this.fetchRequest(url, options);
        } else {
            return this.xhrRequest(url, options);
        }
    }

    async fetchRequest(url, options) {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), options.timeout || 30000);
        try {
            const response = await fetch(url, {
                method: options.method || 'GET',
                headers: options.headers,
                body: options.body,
                signal: controller.signal,
                credentials: 'include'
            });
            clearTimeout(timeoutId);
            // 完整的 HTTP 状态码处理
            switch (response.status) {
                case 200:
                case 201:
                    return await this.parseResponse(response);
                case 204:
                    return null;
                case 304:
                    return this.handleNotModified(url);
                case 401:
                    throw new AuthenticationError('请重新登录');
                case 403:
                    throw new AuthorizationError('没有访问权限');
                case 404:
                    throw new NotFoundError('资源不存在');
                case 429:
                    throw new RateLimitError('请求过于频繁');
                default:
                    if (response.ok) {
                        return await this.parseResponse(response);
                    }
                    throw new HttpError(response.status, response.statusText);
            }
        } catch (error) {
            clearTimeout(timeoutId);
            throw this.enhanceError(error, url);
        }
    }

    enhanceError(error, url) {
        if (error.name === 'AbortError') {
            return { type: 'TIMEOUT', message: `请求超时：${url}` };
        }
        if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
            return { type: 'NETWORK_ERROR', message: `网络连接失败：${url}` };
        }
        return error;
    }
}

5.2 高级特性利用

流式数据处理

// 处理大文件或实时数据流
async function processLargeData(url) {
    const response = await fetch(url);
    const reader = response.body.getReader();
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        // 处理数据块
        console.log('接收到数据块:', value.length);
    }
}

请求重试机制

async function fetchWithRetry(url, options = {}, maxRetries = 3) {
    let lastError;
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
            const result = await fetch(url, options);
            return result;
        } catch (error) {
            lastError = error;
            // 只在网络错误时重试
            if (error.type === 'NETWORK_ERROR' || error.type === 'TIMEOUT') {
                const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000);
                await new Promise(resolve => setTimeout(resolve, delay));
                continue;
            }
            // HTTP 错误不重试
            break;
        }
    }
    throw lastError;
}

六、实际业务场景中的迁移考量

6.1 浏览器兼容性处理

// 特性检测与降级方案
if (typeof fetch === 'function' && typeof AbortController === 'function') {
    // 使用现代 Fetch API
    module.exports = require('./modern-fetch-client');
} else {
    // 降级到 XHR 或 polyfill
    module.exports = require('./legacy-xhr-client');
}

6.2 与现有代码库的集成

拦截器模式

class FetchInterceptor {
    constructor() {
        this.requestInterceptors = [];
        this.responseInterceptors = [];
    }

    use(requestHandler, responseHandler) {
        if (requestHandler) this.requestInterceptors.push(requestHandler);
        if (responseHandler) this.responseInterceptors.push(responseHandler);
    }

    async fetch(url, options = {}) {
        // 处理请求拦截器
        let processedOptions = options;
        for (const interceptor of this.requestInterceptors) {
            processedOptions = await interceptor(url, processedOptions);
        }

        let response = await fetch(url, processedOptions);

        // 处理响应拦截器
        for (const interceptor of this.responseInterceptors) {
            response = await interceptor(response);
        }

        return response;
    }
}

七、性能优化与监控

7.1 请求性能监控

class MonitoredFetch {
    static async fetch(url, options = {}) {
        const startTime = performance.now();
        const requestId = generateUniqueId();
        try {
            emitEvent('requestStart', { requestId, url, startTime });
            const response = await fetch(url, options);
            const endTime = performance.now();
            emitEvent('requestEnd', {
                requestId,
                url,
                duration: endTime - startTime,
                status: response.status,
                size: response.headers.get('content-length')
            });
            return response;
        } catch (error) {
            const endTime = performance.now();
            emitEvent('requestError', {
                requestId,
                url,
                duration: endTime - startTime,
                error: error.message
            });
            throw error;
        }
    }
}

八、总结：为什么现在应该迁移到 Fetch API

8.1 技术优势总结

1. 更现代的 API 设计：基于 Promise，支持 async/await
2. 更精确的错误处理：明确的错误类型和分类
3. 更好的性能特性：流式处理、请求取消等
4. 更标准化的规范：WHATWG 标准，持续演进
5. 更完善的生态系统：与现代框架和工具链深度集成

8.2 业务价值体现

1. 开发效率提升：代码更简洁，调试更简单
2. 用户体验改善：更好的错误处理和重试机制
3. 维护成本降低：统一的技术栈和更少的兼容代码
4. 技术债务减少：跟上 Web 标准发展，避免被遗留技术束缚

8.3 迁移建议

立即开始：

• 新项目直接使用 Fetch API
• 现有项目逐步替换关键的 XHR 调用
• 建立统一的 HTTP 客户端抽象层

长期规划：

• 完全移除 XHR 依赖
• 利用 Fetch 高级特性优化应用性能
• 参与 Web 标准演进，跟进新的特性

结语

从 XMLHttpRequest 到 Fetch API 的迁移，不仅仅是技术方案的替换，更是前端开发理念的升级。Fetch API 代表了 Web 平台向更现代、更强大方向发展的趋势。