认识
一、认识
二、问题
2.1 Ajax、Axios、Fetch 区别？
Ajax, 也是 XMLHttpRequest, 基于事件和回调函数, 通过 readyState 状态机来管理请求的各个阶段。通常在 readyState === 4（完成状态）时, 再判断 status 是否为 2xx 来确定请求成功。编写代码比较繁琐，容易陷入回调地狱，而且错误处理需要手动判断。Ajax 可以通过调用 ajax.abort() 来取消请求。Ajax 中的 progress 事件可以支持原生监测请求的进度, 如上传和下载的进度, 通过 (event.loaded / event.total) * 100 来计算进度。通过 ajax.response 或者 ajax.responseText 获取响应数据, 他们是同步的。
Fetch, 基于 Promise, 返回一个 Response 对象。请求成功不代表 HTTP 状态一定在 2xx 范围内，所以需要检查 response.ok 属性, 该属性为 true 时状态码位于 200-299 范围内, HTTP 错误（如 404 或 500）, 也会进入到 .then 中。Fetch 需要借助 AbortController 来取消请求, 创建一个 AbortController 对象，该对象提供了一个 signal 属性, 在调用 fetch 时, 将 AbortController 的 signal 作为配置项传入, 当需要取消请求时, 调用 AbortController 的 abort() 方法, 此时，该 signal 关联的所有 fetch 请求会被中止, 并抛出一个 AbortError 异常。fetch 没有原生的请求进度监测方法。如果必须使用 Fetch 检测进度, 可以考虑将大文件拆分成多个小块, 分别上传，并自行计算总体进度。缺点是需要额外管理分块和合并逻辑，代码复杂度会提高。通过 response.json() 或者 response.text() 获取文本, 并且他们是异步的。
Axios 同样基于 Promise, 但提供更丰富的配置项和拦截器。内置对 HTTP 错误的处理, 当响应状态码不是 2xx 时会自动 reject。此外，Axios 提供了请求和响应拦截器，可以在请求发出或响应返回前做统一的处理。 Axios 内置了取消请求的机制（通过 Cancel Token 或 AbortController 的新版支持）。