• 前端Ajax、Axios和Fetch的用法和区别笔记

    前端 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>
    9.  
    10.     <script>
    11.         document.getElementById('loadData').addEventListener('click', function() {
    12.             var xhr = new XMLHttpRequest();
    13.             xhr.open('GET', 'https://mybj123.com/22015.html', true);
    14.             xhr.onreadystatechange = function () {
    15.                 if (xhr.readyState === 4 && xhr.status === 200) {
    16.                     document.getElementById('result').innerHTML = xhr.responseText;
    17.                 }
    18.             };
    19.             xhr.send();
    20.         });
    21.     </script>
    22. </body>
    23. </html>

    2. Axios

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

    安装 Axios

    在使用 Axios 之前，需要安装它：

    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>
    10.  
    11.     <script>
    12.         document.getElementById('loadData').addEventListener('click', function() {
    13.             axios.get('https://mybj123.com/22015.html')
    14.                 .then(function(response) {
    15.                     document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);
    16.                 })
    17.                 .catch(function(error) {
    18.                     console.error('Error:', error);
    19.                 });
    20.         });
    21.     </script>
    22. </body>
    23. </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>
    9.  
    10.     <script>
    11.         document.getElementById('loadData').addEventListener('click', function() {
    12.             fetch('https://mybj123.com/22015.html')
    13.                 .then(response => response.json())
    14.                 .then(data => {
    15.                     document.getElementById('result').innerHTML = JSON.stringify(data, null, 2);
    16.                 })
    17.                 .catch(error => {
    18.                     console.error('Error:', error);
    19.                 });
    20.         });
    21.     </script>
    22. </body>
    23. </html>

    区别与比较

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

    通过上述示例和详细解释，你可以根据项目需求选择合适的 HTTP 请求方式。Ajax 适合处理传统项目中的简单请求，Axios 提供了更高级的功能和便捷的 API，而 Fetch 则是现代前端开发中的主流选择。

  • 相关阅读:
    opencv的相机校准和3D建模的理论知识
    操作系统-设备
    java中Random的使用
    AI工程化—— 如何让AI在企业多快好省的落地？
    红日靶场五（vulnstack5）渗透分析
    WebAssembly核心编程[3]: Module 与 Instance
    性能测试监控-java分析工具Arthas
    环状序列（逐行解析）（保姆式解析）（算法竞赛入门经典二）
    从0到1构建react完整项目2022最新无坑版
    如何在 Apache Tomcat 中实现 SSL？
  • 原文地址：https://blog.csdn.net/u014316335/article/details/139272825