封装AJAX请求是前端开发中常见的需求，可以帮助我们简化代码，提高可重用性。下面我将通过JavaScript（使用XMLHttpRequest对象）和现代JavaScript（使用Fetch API）两种方式来展示如何封装AJAX请求。
- 使用XMLHttpRequest封装AJAX
function ajax(method, url, data, callback) {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open(method, url, true);
// 设置请求头，这里以POST方法为例，如果是GET方法则不需要设置Content-Type
if (method === 'POST') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
// 定义请求完成后的回调函数
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功，调用回调函数并传入响应数据
callback(null, xhr.responseText);
} else {
// 请求失败，调用回调函数并传入错误信息
callback(xhr.statusText);
}
};
// 定义请求发生错误时的回调函数
xhr.onerror = function() {
callback('Request failed');
};
// 发送请求，如果是POST方法则需要传入data参数，GET方法则不需要
xhr.send(data);
}
// 使用示例
ajax('GET', 'https://api.example.com/data', null, function(error, response) {
if (error) {
console.error('Error:', error);
} else {
console.log('Response:', response);
}
});
- 使用Fetch API封装AJAX
function fetchAjax(method, url, data = null) {
// 返回一个Promise对象，以便使用async/await处理异步操作
return new Promise((resolve, reject) => {
// 创建fetch请求配置对象
const options = {
method: method, // HTTP方法，如GET、POST等
headers: { 'Content-Type': 'application/json' }, // 设置请求头，根据需要修改Content-Type
body: data ? JSON.stringify(data) : null // 如果是POST或PUT请求，可以传递数据体
};
// 发送fetch请求
fetch(url, options)
.then(response => {
// 检查响应状态码是否在200-299之间，即成功响应范围
if (!response.ok) { // 注意这里的!response.ok是检查状态码是否不是2xx的快捷方式
throw new Error('Network response was not ok'); // 如果不是，则抛出错误
}
return response.json(); // 将响应体解析为JSON格式，以便后续处理
})
.then(data => { // 处理解析后的JSON数据
resolve(data); // 使用resolve传递成功结果给Promise的then链或async/await调用者
})
.catch(error => { // 捕获并处理错误情况，例如网络错误或解析JSON失败等
reject(error); // 使用reject传递错误信息给Promise的catch链或async/await调用者
});
});
}
// 使用示例（使用async/await）
async function fetchData() {
try {
const data = await fetchAjax('GET', 'https://api.example.com/data'); // 等待Promise解析完成并获取数据
console.log('Data:', data); // 成功获取数据后打印到控制台
} catch (error) {
console.error('Error:', error); // 捕获并打印错误信息到控制台
}
}
fetchData(); // 调用函数执行AJAX请求和数据处理流程
总结：
XMLHttpRequest 是早期浏览器支持的标准方式，适用于所有浏览器。但代码比较繁琐，特别是在处理异步操作时。
Fetch API 是现代浏览器支持的标准方式，提供了更简洁的语法和更好的错误处理机制。它基于Promise，可以轻松与async/await结合使用，使异步代码更加直观和易于管理。推荐在支持Fetch API的现代浏览器中使用。