ajax 和 axios 、fetch 的区别

1. Ajax指的是什么?

2. Ajax 的缺点?

3. Axios 的特征

答:

传统 Ajax 指的是 XMLHttpRequest (XHR), 核心使用 XMLHttpRequest 对象, 多个请求之间如果有先后关系的话, 会出现回调地狱

JQuery Ajax 是对原生 XHR 的封装, 除此之外增添了对 JSONP 的支持.

2. Ajax 的缺点如下:

3. axios 的特征

axios 是基于 Promis 用于浏览器和 nodejs 的HTTP 客户端, 本质上也是对原生 XHR 的封装, 只不过它是 Promis 的实现版本, 符合最新的 ES 规范

4. fetch

见 fetch 笔记

5. fetch 的 polyfill

Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。

比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能，或模拟 CSS 实现 rem 单位的支持，或text-shadow，或其他任何你想要的功能。

补充

补充：原生 Ajax 指 XMLHttpRequest；axios 是基于 Promise 封装 XHR 的客户端库；fetch 是浏览器原生提供的基于 Promise 的网络请求 API。

补充对比：

维度	XMLHttpRequest	axios	fetch
时代	浏览器原生（老）	第三方库	浏览器原生（新）
返回	事件 / callback	Promise	Promise
默认请求头	无	自动 JSON	无（需手动设）
拦截器	无	有（请求/响应）	无（需自己包）
取消请求	`xhr.abort()`	`AbortController` / `CancelToken`	`AbortController`
错误处理	需手动判断 `status`	抛 4xx/5xx 异常	只在网络失败 reject
兼容性	IE7+	现代浏览器 + Node	现代浏览器（IE 不支持）

使用建议：

简单请求：fetch + AbortController，体积小、原生支持。
复杂项目：axios 统一拦截、配置 baseURL、超时、Token 刷新。
老浏览器兼容：仍需 axios 或自行封装 XHR。

fetch 示例：

const ctrl = new AbortController();
setTimeout(() => ctrl.abort(), 5000);
fetch('/api/data', { signal: ctrl.signal })
  .then(r => r.ok ? r.json() : Promise.reject(r))
  .then(data => console.log(data))
  .catch(err => console.error(err));