一文弄懂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对象）处理数据，可以分块读取，有利于进步网站性能表现，减少内存占用，对于哀求大文件或者网速慢的场景相当有效。
利用：

1. // 请求的网址
2. let url = '网址';
3. //发起get请求
5. - [ ] List item
7. let _fetch = fetch(url).then(function (response) {
8.     //response.status表示响应的http状态码
9.     if (response.status === 200) {
10.         // json是返回的response提供的一个方法,
11.         // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
12.         return response.json();
13.     } else {
14.         return {};
15.     }
16. });
17. _fetch = _fetch
18.     .then(function (data) {
19.         //响应的内容
20.         console.log(data);
21.         // 响应数据格式化
22.         console.log(data.json());
23.     })
24.     .catch(function (err) {
25.         console.log(err);
26. });`

复制代码

最后总结：

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企服之家，中国第一个企服评测及商务社交产业平台。