Ajax封装成Promise链式调用工具的关键是每次调用都返回可await/.then/.catch的Promise实例，并统一处理状态判断、错误分类、JSON解析等；推荐用fetch封装，需手动检查response.ok、自动json解析、添加headers、内置AbortController超时控制；兼容老浏览器可用XMLHttpRequest手动封装，确保onload时校验status并捕获JSON异常；链式调用要求每次.then()返回新Promise，避免遗漏return；进阶支持拦截器、baseURL、多种method及原始response暴露。
把 Ajax 封装成支持 Promise 链式调用的通用工具函数，关键不是写个 Promise 包一层就完事，而是让每次调用都返回一个可 await、可 .then、可 catch 的 Promise 实例，并统一处理状态判断、错误分类、JSON 解析等共性逻辑。
用 fetch 封装：现代、简洁、推荐
fetch 本身返回 Promise，但默认不因 HTTP 状态码（如 404/500）reject，需手动补全。封装时应：
- 检查 response.ok，非 true 时 reject 并附带 status 和 statusText
- 自动调用 response.json()（也可提供 raw 模式选项）
- 统一添加常用 headers，比如 Content-Type: application/json 和 token
- 内置超时控制，用 AbortController 中断请求，避免 pending 不止
示例：
const request = (url, options = {}) => {const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), options.timeout || 10000);
return fetch(url, {
headers: { 'Content-Type': 'application/json', ...options.headers },
signal: controller.signal,
...options
})
.then(res => {
clearTimeout(timeoutId);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
return res.json();
});
};
兼容老浏览器：XMLHttpRequest 手动封装
若需支持 IE 或特殊环境，可用原生 xhr 封装。重点是：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 监听 onreadystatechange，只在 readyState === 4 时处理响应
- 区分 status（200–299 视为成功）和 onerror（网络层失败）
- 设置 responseType = 'json'，并捕获 JSON 解析异常
- 手动调用 resolve / reject，确保 Promise 状态可控
示例：
const getJSON = url => new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status resolve(xhr.response);
} else {
reject(new Error(`${xhr.status} ${xhr.statusText}`));
}
};
xhr.onerror = () => reject(new Error('Network error'));
xhr.send();
});
支持链式调用的关键细节
链式调用不是语法糖，它依赖每次 .then() 返回新 Promise。所以封装函数必须：
- 始终 return Promise 实例，不能只执行 $.ajax() 却不 return（jQuery 场景常见错误）
- 不在封装内写 success/fail 回调，把业务逻辑交给调用方用 await 或 .then 处理
- 若需串行请求，应在上一个 .then 中 return 下一个 request()，而非直接调用
错误示范：
request('/api/a').then(data => { request('/api/b'); }); // b 不等待 a，也不参与链
正确写法：
request('/api/a').then(data => request('/api/b')).then(data => ...)
进阶：加拦截器与复用能力
真正通用的工具函数，往往需要扩展点。例如：
- 前置拦截器：统一加 token、拼接 baseURL、记录日志
- 后置拦截器：对特定 status 做全局跳转（如 401 清登录态）
- 支持多种 method、data 序列化（form-data / urlencoded）、文件上传
- 暴露原始 response 对象，供需要 header 或 status 的场景使用
这类能力可通过配置对象传入，或设计成类实例（如 new RequestClient({ baseURL })），而不是硬编码在函数里。
