AJAX（Asynchronous JavaScript and XML）是前端与后端进行异步通信的核心技术。封装AJAX可以提高代码复用性、统一处理错误和优化请求流程。下面是一个实用的AJAX封装教程，包含完整实现和使用示例。
一、封装核心思路统一处理请求参数和 headers集中处理错误和异常情况支持Promise，方便使用async/await实现请求拦截和响应拦截处理超时和取消请求二、完整封装实现下面是一个基于原生XMLHttpRequest的AJAX封装，支持GET、POST等常用方法：
三、使用方法1. 基础配置首先进行全局配置，设置基础URL、请求头等：
代码语言：javascript复制import ajax from './ajax.js';
// 配置基础URL
ajax.setDefaults({
baseURL: 'https://api.example.com',
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
});2. 设置拦截器拦截器可以在请求发送前和响应返回后进行一些统一处理：
代码语言：javascript复制// 请求拦截器 - 例如添加token
ajax.setDefaults({
requestInterceptor: (config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 显示加载中提示
showLoading();
return config;
},
// 响应拦截器
responseInterceptor: (response) => {
// 隐藏加载中提示
hideLoading();
// 统一处理响应数据格式
if (response.data.code === 200) {
return response.data.data;
} else {
throw new Error(response.data.message || '请求失败');
}
},
// 错误拦截器
errorInterceptor: (error) => {
hideLoading();
// 统一错误处理
if (error.status === 401) {
// 未授权，跳转到登录页
location.href = '/login';
}
return error;
}
});3. 发送请求使用封装好的方法发送各种类型的请求：
代码语言：javascript复制// GET请求
async function getUserInfo(userId) {
try {
const data = await ajax.get('/users', { id: userId });
console.log('用户信息:', data);
return data;
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
// POST请求
async function createUser(userData) {
try {
const result = await ajax.post('/users', userData);
console.log('用户创建成功:', result);
} catch (error) {
console.error('用户创建失败:', error);
}
}
// PUT请求
async function updateUser(userId, userData) {
try {
await ajax.put(`/users/${userId}`, userData);
} catch (error) {
console.error('更新用户失败:', error);
}
}
// DELETE请求
async function deleteUser(userId) {
try {
await ajax.delete('/users', { id: userId });
} catch (error) {
console.error('删除用户失败:', error);
}
}四、封装的优势代码复用：避免重复编写AJAX逻辑统一处理：集中处理错误、加载状态、权限验证等易于维护：修改一处即可影响所有请求扩展性强：可以方便地添加新功能如缓存、重试等使用便捷：提供简洁的API，如get、post等方法五、扩展建议添加请求缓存功能，减少重复请求实现请求重试机制，应对临时网络问题支持取消请求，避免无用请求消耗资源添加请求队列，控制并发请求数量通过这个封装，你可以在项目中更高效、更规范地处理AJAX请求，提升开发效率和代码质量。