# Fetch 和 ajax 以及 axios 的辨析
前言：闲来无事看掘金，发现自己对于这些异步经常使用的方法经常是 “会使用，知其然而不知其所以然”，故而查阅资料整合一下相关知识点
# Ajax（Asynchronous JavaScript and XML）
Ajax 其实更像是一种异步请求模式，注意关键字是模式而不是方法，是基于一种 XMLHttpRequest 的请求，所谓的 XMLHttpRequest 是浏览器提供的一种异步请求方式之一，另一种浏览器提供请求的方式叫做 Fetch ，也就是后面将会进一步提到的 promise 化回调请求。
Ajax 的请求方法如下：
<script type="text/javascript"> | |
var xmlHttp; | |
function createXMLHttpRquest() | |
{ | |
if(window.ActiveXobject) | |
{ | |
xmlHttp=new ActiveXobject("MicrosoftXMLHTTP"); | |
} | |
else if(window.XMLHttpRequest) | |
{ | |
xmlHttp=new XMLHttpRequest(); | |
} | |
} | |
function startRequest() | |
{ | |
createXMLHttpRquest(); | |
xmlHttp.onreadystatechange=handleStateChange; | |
xmlHttp.open("GET","response.txt",true); | |
xmlHttp.send(null); | |
} | |
function handleStateChange() | |
{ | |
if(xmlHttp.readyState==4) | |
{ | |
if(xmlHttp.status==200) | |
{ | |
alert("来自服务器的响应："+xmlHttp.responseText); | |
} | |
} | |
} | |
</script> |
# Fetch
之前都把 Fetch 误以为成一种 "底层逻辑为调用 ajax 方法的 Api 函数"，这句话感觉属于是不懂装懂的典型发言。
首先，我们要明白 Fetch 和 XMLHttpRequest 都是浏览器提供的异步手段，二者都是作为 API 而存在，所以 Fetch 的底层逻辑并不是像传统的 Ajax 那样是基于 XMLHttpRequest 来进行通信的。至于，其底层逻辑具体是什么，我没有做相关了解，大概就是例如 Service Workers 之类的吧...
其次，上文我们提到过 Ajax 实际上是作为一种模式名称而被广而传之，因此，Fetch 和 ajax 可以说是不同层面的两种概念。好比 ajax 是 boss，fetch 只是执行事情的大头兵而已。
重要的是，对比基于 XMLHttpRequest 的请求而言，Fetch 实现了如下优点：
- 能够更好的实现缓存控制，跨域控制，凭证控制，重定向控制
- 参考：https://www.infoq.cn/article/nbd3cbcdqezhjxwva26a
- https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api
Fetch 使用方法如下：
fetch("/service", { | |
method: "GET", | |
signal: controller.signal, | |
}) | |
.then((res) => res.json()) | |
.then((json) => console.log(json)) | |
.catch((error) => console.error("Error:", error)); |
# Axios
axios 不是一种新的技术。axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生 XHR 的封装，只不过它是 Promise 的实现版本，符合最新的 ES 规范
包含的特性：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
axios 涉及到的知识点太多了，准备另起一章。
