JavaScript发送AJAX请求主要用fetch()（推荐）或XMLHttpRequest；需注意响应状态检查、JSON解析错误、跨域及取消机制。fetch返回Promise，支持async/await；XMLHttpRequest需手动封装Promise以兼容老浏览器。
JavaScript 发送 AJAX 请求主要靠 XMLHttpRequest 或更现代的 fetch() API；处理异步回调的关键是理解 Promise 链、async/await，或传统回调函数的嵌套与错误捕获。
用 fetch() 发起请求（推荐）
fetch() 返回一个 Promise，天然支持 async/await，语法简洁，且默认不带 Cookie（需显式配置）。
- 基本 GET 请求：
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
- POST 请求（带 JSON 数据）：
fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then(res => res.json())
.then(result => console.log('创建成功:', result))
.catch(err => console.error(err));
用 async/await 写更清晰的异步逻辑
避免 .then 嵌套，让异步代码像同步一样可读，但必须在 async 函数内使用。
try {
const res = await fetch('/api/user/123');
if (!res.ok) throw new Error(`加载失败: ${res.status}`);
const user = await res.json();
console.log(user);
return user;
} catch (err) {
console.error('出错了', err);
throw err;
}
}
兼容老浏览器？用 XMLHttpRequest 手动封装
如果需支持 IE10 及以下，XMLHttpRequest 是唯一选择；建议简单封装成 Promise，便于统一处理。
立即学习“Java免费学习笔记（深入）”；
function ajax(url, options = {}) {return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(options.method || 'GET', url);
if (options.headers) {
Object.keys(options.headers).forEach(key => {
xhr.setRequestHeader(key, options.headers[key]);
});
}
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status resolve(xhr.responseText);
} else {
reject(new Error(`HTTP ${xhr.status}`));
}
};
xhr.onerror = () => reject(new Error('网络错误'));
xhr.send(options.body || null);
});
}
// 使用：
ajax('/api/test')
.then(data => console.log(JSON.parse(data)))
.catch(err => console.error(err));
常见陷阱与应对建议
-
忘记检查响应状态：fetch 不会因 4xx/5xx 拒绝 Promise，必须手动判断
res.ok或res.status -
未处理 JSON 解析失败：后端返回非 JSON（如 HTML 错误页）时，
res.json()会抛错，应加 try/catch -
跨域被拦截：确保服务端设置了
Access-Control-Allow-Origin，开发时可用代理绕过 - 重复请求或内存泄漏：在 React/Vue 等框架中，组件卸载后仍执行 setState 或更新 DOM，需加取消机制（如 AbortController）
不复杂但容易忽略。
