AJax
概念:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。是一种网络请求的概念框架。
主要特点:实现页面局部刷新,主要使用js的XMLHttpRequest请求实现网络请求。
主要缺点:使用函数回调的方式实现异步请求,若请求里写请求将会导致回调地狱的发生。
示例代码:
javascript
<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的封装。
代码:
javascript
<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请求库;
代码:
javascript
// 发送 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;