AJAX 03 XMLHttpRequest、Promise、封装简易版 axios

'# AJAX 03 XMLHttpRequest、Promise、封装简易版 axios

一、背景与问题

AJAX（Asynchronous JavaScript and XML）技术自2005年诞生以来，一直是现代Web开发的核心基石。在早期，开发者通过XMLHttpRequest对象实现异步通信，而随着Promise的引入和axios等库的流行，AJAX的使用方式发生了深刻变革。

在实际开发中，开发者常面临以下问题：

1. 多层嵌套回调导致的"回调地狱"
2. 无法统一处理网络请求的错误
3. 重复代码导致的可维护性问题
4. 跨域请求的复杂性
5. 大型项目中请求拦截和日志记录的需求

本文将深入剖析XMLHttpRequest的工作原理，结合Promise实现异步编程，最后封装一个简易版axios库，探讨其在实际项目中的应用场景与注意事项。

二、基本原理

1. XMLHttpRequest 工作机制

XMLHttpRequest 是浏览器提供的原生API，其核心原理基于HTTP协议的客户端实现。其生命周期包含以下几个关键阶段：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 初始化请求
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText); // 处理响应数据
        } else {
            console.error('请求失败:', xhr.status);
        }
    }
};
xhr.send(); // 发起请求

关键点：

• 同步/异步模式：第三个参数控制请求模式，同步模式会阻塞主线程
• 状态机：readyState 有5个状态值（0-4），通过监听onreadystatechange处理不同阶段
• HTTP头控制：通过setRequestHeader设置请求头，如Content-Type、Accept

2. Promise 异步编程模型

Promise 是JavaScript异步编程的标准化解决方案，其核心特性包括：

function fetchData(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText);
            } else {
                reject(new Error(`请求失败: ${xhr.status}`));
            }
        };
        xhr.onerror = function() {
            reject(new Error('网络错误'));
        };
        xhr.send();
    });
}

关键特性：

• 链式调用：.then().catch() 避免回调地狱
• 错误处理：统一的错误处理机制
• 状态管理：Pending/Fulfilled/Rejected 三态

三、环境准备

1. 浏览器支持

现代浏览器完全支持XMLHttpRequest和Promise，但需注意：

• IE10+支持Promise（需polyfill）
• 跨域请求需配置CORS
• 需要处理Same-Origin Policy限制

2. 开发工具

推荐使用：

• VS Code（代码编辑）
• Postman（接口调试）
• Chrome DevTools（网络监控）

四、核心实现

1. 基础XMLHttpRequest用法

完整示例：获取用户数据

function getUserData(userId) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `https://jsonplaceholder.typicode.com/users/${userId}`, true);
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log('用户数据:', JSON.parse(xhr.responseText));
            } else {
                console.error('请求失败:', xhr.status);
            }
        }
    };
    
    xhr.send();
}

// 调用示例
getUserData(1);

关键代码解释：

• xhr.open() 初始化请求，第三个参数为true表示异步
• onreadystatechange 事件处理函数，当readyState变为4时处理响应
• JSON.parse() 将响应文本解析为对象

2. Promise封装XMLHttpRequest

封装为可复用的异步函数：

function fetchJson(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error(`HTTP错误: ${xhr.status}`));
            }
        };
        
        xhr.onerror = function() {
            reject(new Error('网络错误'));
        };
        
        xhr.send();
    });
}

// 使用示例
fetchJson('https://jsonplaceholder.typicode.com/posts/1')
    .then(data => console.log('数据:', data))
    .catch(err => console.error('错误:', err));

关键改进：

• 统一处理HTTP状态码
• 简化错误处理逻辑
• 支持链式调用

3. 封装简易版axios

实现基本的GET/POST方法，添加错误拦截：

class SimpleAxios {
    constructor(baseURL = '') {
        this.baseURL = baseURL;
    }

    get(url, config = {}) {
        return this.request({
            method: 'GET',
            url,
            ...config
        });
    }

    post(url, data, config = {}) {
        return this.request({
            method: 'POST',
            url,
            data,
            ...config
        });
    }

    request(config) {
        const { method, url, data, headers = {}, timeout = 10000 } = config;
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            const fullUrl = `${this.baseURL}${url}`;
            
            xhr.open(method, fullUrl, true);
            
            // 设置请求头
            for (const [key, value] of Object.entries(headers)) {
                xhr.setRequestHeader(key, value);
            }
            
            xhr.timeout = timeout;
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject(new Error(`请求失败: ${xhr.status} ${xhr.statusText}`));
                }
            };
            
            xhr.onerror = function() {
                reject(new Error('网络错误'));
            };
            
            xhr.ontimeout = function() {
                reject(new Error('请求超时'));
            };
            
            try {
                if (method === 'POST') {
                    xhr.send(JSON.stringify(data));
                } else {
                    xhr.send();
                }
            } catch (err) {
                reject(err);
            }
        });
    }
}

关键特性：

• 支持基础请求方法
• 自动处理JSON数据
• 增加超时控制
• 支持自定义请求头

五、完整案例

1. 用户登录系统案例

完整前端代码：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX登录示例</title>
</head>
<body>
    <h2>用户登录</h2>
    <form id="loginForm">
        <label>用户名：<input type="text" name="username" required></label>
        <label>密码：<input type="password" name="password" required></label>
        <button type="submit">登录</button>
    </form>
    <div id="message"></div>

    <script>
        const axios = new SimpleAxios('https://jsonplaceholder.typicode.com');

        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const username = this.username.value;
            const password = this.password.value;
            const message = document.getElementById('message');
            
            try {
                const response = await axios.post('/login', { username, password });
                message.textContent = '登录成功！';
                message.style.color = 'green';
            } catch (err) {
                message.textContent = '登录失败: ' + err.message;
                message.style.color = 'red';
            }
        });
    </script>
</body>
</html>

后端模拟（Node.js + Express）：

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    // 模拟验证逻辑
    if (username === 'admin' && password === '123456') {
        res.status(200).json({ success: true, message: '登录成功' });
    } else {
        res.status(401).json({ success: false, message: '无效的凭据' });
    }
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

关键点：

• 使用封装后的axios进行登录请求
• 处理成功和失败响应
• 显示用户反馈信息
• 模拟后端验证逻辑

六、源码解析

1. SimpleAxios类结构

class SimpleAxios {
    constructor(baseURL = '') {
        this.baseURL = baseURL;
    }

    get(url, config = {}) {
        return this.request({
            method: 'GET',
            url,
            ...config
        });
    }

    post(url, data, config = {}) {
        return this.request({
            method: 'POST',
            url,
            data,
            ...config
        });
    }

    request(config) {
        // 实现细节...
    }
}

• 构造函数接收基础URL
• get和post方法作为对外接口
• request方法处理具体请求逻辑

2. 请求配置处理

const { method, url, data, headers = {}, timeout = 10000 } = config;
const fullUrl = `${this.baseURL}${url}`;

• 解构配置对象
• 构造完整URL
• 设置默认参数

3. 请求头设置

for (const [key, value] of Object.entries(headers)) {
    xhr.setRequestHeader(key, value);
}

• 遍历headers对象
• 使用setRequestHeader设置请求头
• 支持自定义Content-Type等

七、进阶使用

1. 添加拦截器

class SimpleAxios {
    constructor(baseURL = '') {
        this.baseURL = baseURL;
        this.interceptors = {
            request: [],
            response: []
        };
    }

    addRequestInterceptor(fn) {
        this.interceptors.request.push(fn);
    }

    addResponseInterceptor(fn) {
        this.interceptors.response.push(fn);
    }

    request(config) {
        // 请求拦截
        for (const fn of this.interceptors.request) {
            config = fn(config);
        }
        
        // 响应拦截
        return new Promise((resolve, reject) => {
            // ...原有实现...
            
            xhr.onload = function() {
                for (const fn of this.interceptors.response) {
                    try {
                        const result = fn({
                            data: JSON.parse(xhr.responseText),
                            status: xhr.status,
                            statusText: xhr.statusText
                        });
                        resolve(result);
                    } catch (err) {
                        reject(err);
                    }
                }
            };
        });
    }
}

2. 增加超时控制

xhr.timeout = timeout;
xhr.ontimeout = function() {
    reject(new Error('请求超时'));
};

• 设置超时时间
• 添加超时处理逻辑
• 支持自定义超时时间

3. 错误日志记录

xhr.onerror = function() {
    console.error('网络错误:', xhr.status, xhr.statusText);
    reject(new Error('网络错误'));
};

• 记录错误日志
• 提供更详细的错误信息

八、性能与工程实践

1. 性能优化策略

2. 安全风险分析

3. 错误处理规范

try {
    const response = await axios.post('/login', { username, password });
    // 正常处理
} catch (err) {
    // 统一错误处理
    console.error('请求异常:', err.message);
    // 记录错误日志
    // 显示用户提示
}

• 区分网络错误、超时、服务器错误
• 记录错误日志
• 提供用户提示

九、常见问题与踩坑

1. 跨域请求问题

错误示例：

fetch('https://api.example.com/data')
    .then(res => res.json())
    .catch(err => console.error(err));

问题分析：

• 浏览器默认阻止跨域请求
• 服务器未配置CORS头

解决办法：

• 添加CORS头：Access-Control-Allow-Origin: *
• 使用代理服务器（Node.js中间件）
• 使用浏览器扩展（如Allow CORS: All Origins）

2. 错误处理不完善

错误示例：

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

问题分析：

• 忽略了其他成功状态码（201, 204等）
• 未处理服务器返回的错误信息

改进方案：

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 处理成功响应
    } else {
        // 处理服务器错误
        console.error('服务器返回错误:', xhr.status, xhr.statusText);
    }
};

3. 超时处理缺失

错误示例：

xhr.send();

问题分析：

• 未设置超时时间
• 长时间等待导致阻塞

解决办法：

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
    console.error('请求超时');
};

十、最佳实践

1. 使用场景

推荐使用：

• 需要动态更新页面内容（如实时聊天）
• 需要处理大量数据（分页加载）
• 需要离线功能（本地缓存）
• 需要精细控制请求（如设置请求头）

不推荐使用：

• 需要实时性要求极高的场景（建议使用WebSocket）
• 需要大量文件传输（建议使用FormData和multipart/form-data）
• 需要复杂的数据处理（建议使用Web Worker）

2. 项目架构建议

project/
├── src/
│   ├── axios.js        // 封装后的axios实现
│   ├── utils/
│   │   └── http.js     // 工具函数
│   ├── services/
│   │   └── user.js     // 业务请求
│   └── config.js       // 配置文件
├── tests/
│   └── http.test.js    // 单元测试
└── index.html          // 主页面

3. 开发规范

• 统一错误处理格式
• 为每个API接口添加注释
• 使用TypeScript定义类型
• 添加单元测试
• 使用ESLint进行代码规范检查

十一、总结

AJAX技术作为现代Web开发的核心，其底层实现基于XMLHttpRequest，而Promise机制解决了异步编程的复杂性。通过封装简易版axios，我们实现了对原始API的抽象和扩展，为实际开发提供了更高效的解决方案。

在实际项目中，应该根据具体需求选择合适的实现方式：

• 对于简单场景，直接使用XMLHttpRequest即可
• 对于复杂需求，建议使用封装后的axios库
• 对于需要高度定制的场景，可以自行实现更复杂的封装

需要注意的潜在风险包括：

• 跨域请求的配置问题
• 错误处理的完整性
• 超时和重试机制的设置
• 安全方面的隐患

通过合理的封装和规范的使用，AJAX技术能够显著提升Web应用的性能和用户体验，同时降低维护成本。在实际开发中，建议结合具体业务需求，选择最合适的实现方案。