AJax
概念：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。是一种网络请求的概念框架。
主要特点：实现页面局部刷新，主要使用js的XMLHttpRequest请求实现网络请求。
主要缺点：使用函数回调的方式实现异步请求，若请求里写请求将会导致回调地狱的发生。
示例代码：
<body>
<script>
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open("get", url, false);
//异步函数监听
xhr.onreadystatechange = function () {
// 异步回调函数
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.info("响应结果", xhr.response)
}
}
}
xhr.send(null);
}
ajax('https://smallpig.site/api/category/getCategory')
</script>
</body>
Fetch
概念：使用ES6中提出的promise实现网络请求是Ajax的替代品，是真实存在的请求API。不是对Ajax的封装。
代码：
<script>
function ajaxFetch(url) {
fetch(url).then(res => res.json()).then(data => {
console.info(data)
})
}
ajaxFetch('https://smallpig.site/api/category/getCategory')
</script>
主要特点：
- 使用promise的方式进行网络请求，支持async / await；
- 采用模块化请求，语法简洁更加语义化，例如Request 、 Response,可读性较好；
- 脱离XHR，采用新的实现方式。
主要缺点：
- 只对网络请求错误进行reject，而对服务器返回的400或者500 都会被当做成功的请求；
- 不支持终端和超时处理，造成资源流量的浪费；
- 没办法监听请求的进度；
- 默认不会带cookie，需要手动添加配置；
Axios
概念：它是一个基于XHR二次进行封装的HTTP请求库；
代码：
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
主要特点：
- 浏览器端发起XMLHTTPRequest请求；
- node端发起http请求；
- 可进行请求终端；
- 可监听请求和返回；
- 支持Promise API；
- 可中断请求；
- 可自动转换json格式
- 客户端支持转换XSRF攻击；
- axios和vue没关系，axios也不是随着Vue的兴起才广泛使用的，axios本身就是独立的请求库，跟用什么框架没关系；而且最初Vue官方推荐的请求库是vue-resouce，后来才推荐的axios；
- axios不是xhr的子集，axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；axios = xhr + http
注意📢
axios和vue是没关系的，它并不是随着vue的兴起而被广泛使用的，而是axios本身就是一个独立的请求库，跟使用的框架并没有关系；最初vue官方推荐的请求库是vue-resouce，后来才推荐使用axios；axios是利用了xhr进行的二次封装库，xhr只是其中的一个http请求适配器；Axios = XHR + HTTP；
