Ajax、Axios和Fetch的用法和区别，撤回请求，防抖节流，针对处理高频率请求 ...

金歌  论坛元老 | 2025-4-29 19:02:01 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1814|帖子 1814|积分 5442

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
在现代JavaScript开辟中，用于进行HTTP请求的三种主要方式是Ajax、Axios和Fetch。这三种方式各有优缺点，而且实用于差别的场景。在合适的业务场景下使用，以下是它们的区别和使用举例。而且实现撤回或取消请求，淘汰不必要的重复请求，在同时有高频率大量请求时，放入请求队列，以及前端的防抖或者节流，进步前端性能优化。
1. Ajax

Ajax（Asynchronous JavaScript and XML）是一种使用JavaScript和XML进行异步网页更新的技术。尽管其名称中包含XML，但它可以处理多种数据格式，包罗JSON、HTML和纯文本。传统上，Ajax使用的是XMLHttpRequest对象。
Ajax 示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Ajax Example</title>
  5. </head>
  6. <body>
  7.     <button id="loadData">Load Data</button>
  8.     <div id="result"></div>
  10.     <script>
  11.         document.getElementById('loadData').addEventListener('click', function() {
  12.      
  13.             var xhr = new XMLHttpRequest();
  14.             xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
  15.             xhr.onreadystatechange = function () {
  16.      
  17.                 if (xhr.readyState === 4 && xhr.status === 200) {
  18.      
  19.                     document.getElementById('result').innerHTML = xhr.responseText;
  20.                 }
  21.             };
  22.             xhr.send();
  23.         });
  24.     </script>
  25. </body>
  26. </html>
复制代码
2. Axios

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。它具有简单易用的API，支持拦截请求和相应、取消请求、自动转换JSON数据等功能。
安装 Axios

在使用Axios之前，必要安装它：
  1. npm install axios
复制代码
Axios 示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Axios Example</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  6. </head>
  7. <body>
  8.     <button id="loadData">Load Data</button>
  9.     <div id="result"></div>
  11.     <script>
  12.         document.getElementById('loadData').addEventListener('click', function() {
  13.      
  14.             axios.get('https://jsonplaceholder.typicode.com/posts/1')
  15.                 .then(function(response) {
  16.      
  17.                     document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);
  18.                 })
  19.                 .catch(function(error) {
  20.      
  21.                     console.error('Error:', error);
  22.                 });
  23.         });
  24.     </script>
  25. </body>
  26. </html>
复制代码
3. Fetch

Fetch API是现代浏览器中用来替换XMLHttpRequest的，提供了一个更强大和灵活的方式来发起网络请求。它基于Promise，语法更加简洁。
Fetch 示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Fetch Example</title>
  5. </head>
  6. <body>
  7.     <button id="loadData">Load Data</button>
  8.     <div id="result"></div>
  10.     <script>
  11.         document.getElementById('loadData').addEventListener('click', function() {
  12.      
  13.             fetch('https://jsonplaceholder.typicode.com/posts/1')
  14.                 .then(response => response.json())
  15.                 .then(data => {
  16.      
  17.                     document.getElementById('result').innerHTML = JSON.stringify(data, null, 2);
  18.                 })
  19.                 .catch(error => {
  20.      
  21.                     console.error('Error:', error);
  22.                 });
  23.         });
  24.     </script>
  25. </body>
  26. </html>
复制代码
区别与比较


  • 使用轻便性：
         
    • Ajax：使用XMLHttpRequest对象，必要处理各种状态和变乱，代码较为冗长。   
    • Axios：基于Promise，API设计更简洁，使用更方便，支持更多功能。   
    • Fetch：原生Promise支持，语法简洁，但必要处理一些低级错误（比方网络错误不会被捕捉到，必要手动处理response.ok）。  
      
  • 浏览器支持：
         
    • Ajax：全部现代浏览器都支持。   
    • Axios：必要引入外部库，但支持全部现代浏览器。   
    • Fetch：全部现代浏览器（Edge开始支持），但对于老版本浏览器（如IE）必要使用polyfill。  
      
  • 功能特性：
         
    • Ajax：功能较为基础，必要手动处理各种请求和相应。   
    • Axios：支持请求和相应拦截器、自动转换JSON数据、取消请求等高级功能。   
    • Fetch：提供基本功能，相应处理必要手动转换（比方JSON），且不支持progress变乱和取消请求。  

撤回或者取消请求，实现请求的防抖节流

在前端开辟中，撤回或取消HTTP请求，防抖和节流都是优化网络请求和提拔用户体验的重要技术。以下是具体的表明和实现方法。
1. 撤回或取消HTTP请求

Axios

Axios 提供了取消请求的功能，通过使用 CancelToken。
取消请求示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Axios Cancel Request Example</title>
  5.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  6. </head>
  7. <body>
  8.     <button id="startRequest">Start Request</button>
  9.     <button id="cancelRequest">Cancel Request</button>
  10.     <div id="result"></div>
  12.     <script>
  13.         let cancelTokenSource;
  15.         document.getElementById('startRequest').addEventListener('click', function() {
  16.      
  17.             cancelTokenSource = axios.CancelToken.source();
  19.             axios.get('https://jsonplaceholder.typicode.com/posts/1', {
  20.      
  21.                 cancelToken: cancelTokenSource.token
  22.             })
  23.             .then(function(response) {
  24.      
  25.                 document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);
  26.             })
  27.             .catch(function(error) {
  28.      
  29.                 if (axios.isCancel(error)) {
  30.      
  31.                     console.log('Request canceled', error.message);
  32.                 } else {
  33.      
  34.                     console.error('Error:', error);
  35.                 }
  36.             });
  37.         });
  39.         document.getElementById('cancelRequest').addEventListener('click', function() {
  40.      
  41.             if (cancelTokenSource) {
  42.      
  43.                 cancelTokenSource.cancel('Request canceled by the user.');
  44.             }
  45.         });
  46.     </script>
  47. </body>
  48. </html>
复制代码
Fetch

Fetch API 原生不支持取消请求，但可以通过 AbortController 来实现。
取消请求示例

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

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表