102. ajax，fetch，axios的关系

[guMcrey]

Ajax: 异步的 JavaScript 和 XML

特点:

• 基于 XMLHTTPRequest API 与服务器异步通信

缺点:

• XHR 本身架构不清晰, 有了 fetch 的替代方案

Fetch: Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

特点:

• 是 ES6 时出现, 基于 Promise 设计, 浏览器原生支持
• 更加底层，提供的API丰富（request, response）
• fetch() 通过数据流 (Steam 对象) 处理数据, 可以分块读取, 有利于提高网站性能表现, 减少内存占用, 对于请求大文件或者网速慢的场景相当有用;

缺点:

• fetch 只对网络请求报错, 对 400, 500 都当作成功的请求, 需要封装去处理
• 兼容性相对较差

---

Axios: 一个基于 Promise 用于浏览器和 Node.js 的网络请求库, 在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特点:

• 从浏览器创建 XMLHTTPRequests
• 从 Node.js 创建 HTTP 请求
• 支持 Promise API
• 拦截请求和响应 (axios.interceptors.request(), axios,interceptors.response())
• 转换请求和响应数据 (默认情况下, axios将 JavaScript 对象序列化为 JSON )
• 取消请求 (AbortController.abort())
• 自动转换 JSON 数据
• 客户端支持防御 XSRF (xsrfCookieName, xsrfHeaderName)
• 良好的错误处理机制

缺点:

• 浏览器不原生支持, 需要安装第三方包

---

拓展:

1. 为什么 axios 不使用 fetch 重写呢?
   • 由于 fetch 目前还存在兼容问题, 对于不兼容的浏览器还是需要 XMLHTTPRequest 来做 Polyfill