前端开发|数据交互：ajax的封装与调用，精通Ajax封装与调用方法

🔥 前端开发 | 数据交互：Ajax的封装与调用，精通Ajax封装与调用方法

📢 最新动态（2025年7月）
随着Web应用复杂度的提升，Ajax仍然是前后端数据交互的核心技术之一，尽管Fetch API和WebSocket逐渐普及，但Ajax凭借其兼容性和灵活性，依然是许多项目的首选，最新统计显示，仍有超过65%的企业级项目采用Ajax进行数据请求。

🚀 什么是Ajax？

Ajax（Asynchronous JavaScript and XML）是一种异步数据交互技术，可以在不刷新页面的情况下与服务器交换数据，虽然名字里有XML，但现在更常用的是JSON格式。

基本Ajax请求示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    } else {
        console.error('请求失败！');
    }
};
xhr.send();

虽然原生Ajax能用，但每次写这么多代码太麻烦了！封装Ajax成了前端开发的必备技能。

🛠️ 如何封装一个Ajax工具函数？

基础封装：支持GET/POST

function ajax({ url, method = 'GET', data = null, success, error }) {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            success?.(JSON.parse(xhr.responseText));
        } else {
            error?.(new Error(`请求失败，状态码：${xhr.status}`));
        }
    };
    xhr.onerror = function() {
        error?.(new Error('网络错误，请求未发送成功'));
    };
    xhr.send(data ? JSON.stringify(data) : null);
}

调用示例

ajax({
    url: 'https://api.example.com/users',
    method: 'POST',
    data: { name: '张三', age: 25 },
    success: (res) => console.log('成功:', res),
    error: (err) => console.error('失败:', err)
});

进阶封装：支持Promise

现在更流行用Promise，让代码更优雅：

function ajaxPromise({ url, method = 'GET', data = null }) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error(`请求失败，状态码：${xhr.status}`));
            }
        };
        xhr.onerror = function() {
            reject(new Error('网络错误，请求未发送成功'));
        };
        xhr.send(data ? JSON.stringify(data) : null);
    });
}

调用示例（配合async/await）

async function fetchData() {
    try {
        const data = await ajaxPromise({
            url: 'https://api.example.com/data',
            method: 'GET'
        });
        console.log('数据获取成功:', data);
    } catch (err) {
        console.error('出错了:', err);
    }
}
fetchData();

🌟 封装优化：增加超时、取消请求

增加超时控制

function ajaxWithTimeout({ url, method = 'GET', data = null, timeout = 5000 }) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        const timer = setTimeout(() => {
            xhr.abort();
            reject(new Error('请求超时！'));
        }, timeout);
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function() {
            clearTimeout(timer);
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error(`请求失败，状态码：${xhr.status}`));
            }
        };
        xhr.onerror = function() {
            clearTimeout(timer);
            reject(new Error('网络错误，请求未发送成功'));
        };
        xhr.send(data ? JSON.stringify(data) : null);
    });
}

支持取消请求

let abortController = null;
function fetchWithAbort(url) {
    if (abortController) {
        abortController.abort(); // 取消上一个请求
    }
    abortController = new AbortController();
    return fetch(url, { signal: abortController.signal })
        .then(res => res.json())
        .finally(() => { abortController = null; });
}
// 调用示例
fetchWithAbort('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('请求被取消');
        } else {
            console.error('请求失败:', err);
        }
    });

💡 最佳实践

1. 统一错误处理：封装时统一处理HTTP状态码，避免重复代码。
2. 请求拦截：可加入请求前校验（如Token检查）。
3. 响应拦截：对返回数据统一格式化（如提取data字段）。
4. 缓存策略：对GET请求增加缓存优化，减少重复请求。

Ajax封装能让代码更简洁、可维护性更高，无论是原生XHR还是基于Promise的封装，核心目标都是提升开发效率，2025年的今天，虽然新技术层出不穷，但Ajax仍然是前端工程师必须掌握的技能！

🚀 动手试试吧！封装属于你的Ajax工具库！