ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一文弄懂ajax、axios、fetch [打印本页]

作者: 去皮卡多 时间: 2024-7-17 05:56
标题: 一文弄懂ajax、axios、fetch
ajax、axios、fetch有什么区别

要相识这个问题，需要先知道这三者到底是什么，以及他们之间的关系

Ajax

简介：

AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步哀求，最大的上风：无刷新获取数据
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起利用的新方式。Ajax只是个技术统称，可以用XMLHttpRequest来实现Ajax，也可以用Fetch来实现Ajax
特点：

1 优点
1.1 可以无需刷新页面而与服务器端举行通信。（局部刷新）
1.2 允许你根据用户变乱来更新部门页面内容。
2 缺点
2.1 没有浏览汗青，不能回退
2.2 存在跨域问题(同源)
2.3 SEO 不友好
XMLHttpRequest手写：

注：办理ie缓存问题
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次哀求，剩余多次哀求不会再发送给浏览器而是直接加载缓存中的数据。
办理方式：浏览器的缓存是根据 url地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题 xhr.open(“get”,“/url?t=”+Date.now());
Axios

简介：

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，axios本质上也是对原生XHR（XMLHttpReques）的封装，只不外它是基于Promise的，是Promise的实现版本，符合最新的ES规范
特点：

1 从浏览器创建 XMLHttpRequests哀求
2 从node.js创建http哀求
3 支持 Promise API
4 拦截哀求和响应，比如：在哀求前添加授权和响应前做一些事变。
5 转换哀求数据和响应数据，比如：举行哀求加密或者响应数据加密。
6 取消哀求
7 自动转换JSON数据
8 客户端支持防御XSRF
利用：

官网地址：https://www.axios-http.cn/docs/api_intro
Fetch

简介：

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 哀求，浏览器原生提供这个对象。
特点：

fetch()利用 Promise，倒霉用回调函数，因此大大简化了写法，写起来更简洁。
fetch()采用模块化计划，API 分散在多个对象上（Response 对象、
Request 对象、Headers 对象），更合理一些；
相比之下，XMLHttpRequest 的 API 计划并不是很好，
输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
fetch()通过数据流（Stream对象）处理数据，可以分块读取，有利于进步网站性能表现，减少内存占用，对于哀求大文件或者网速慢的场景相当有效。
利用：

// 请求的网址
let url = '网址';
//发起get请求
- [ ] List item
let _fetch = fetch(url).then(function (response) {
//response.status表示响应的http状态码
if (response.status === 200) {
// json是返回的response提供的一个方法,
// 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
return response.json();
} else {
return {};
}
});
_fetch = _fetch
.then(function (data) {
//响应的内容
console.log(data);
// 响应数据格式化
console.log(data.json());
})
.catch(function (err) {
console.log(err);
});`

复制代码

最后总结：

AJAX、Axios和Fetch都是用于在浏览器中与服务器举行异步通信的技术，但它们之间存在一些区别：
AJAX（Asynchronous JavaScript And XML）：AJAX是一种技术统称，它可以通过XMLHttpRequest对象来实现。AJAX的重要优点是可以在不刷新页面的情况下与服务器端举行通信，并根据用户变乱更新部门页面内容。缺点是存在跨域问题，SEO不友好，且在某些浏览器中可能存在缓存问题。
Axios：Axios是一个基于Promise的HTTP客户端，既可以在浏览器中利用，也可以在Node.js中利用。Axios的特点包括支持Promise API、拦截哀求和响应、转换哀求数据和响应数据、取消哀求、自动转换JSON数据以及客户端支持防御XSRF等。利用Axios可以简化代码，进步可读性和可维护性。
Fetch：Fetch是XMLHttpRequest的升级版，用于在JavaScript脚本中发出HTTP哀求。Fetch的特点包括利用Promise、模块化计划、通过数据流处理数据等。Fetch的API更加简洁，易于理解和利用。
总结：AJAX是一种技术统称，可以通过XMLHttpRequest对象实现；Axios是一个基于Promise的HTTP客户端，功能更加丰富；Fetch是XMLHttpRequest的升级版，利用Promise和模块化计划。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)