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

本文链接：https://blog.csdn.net/weixin_47622005/article/details/139010809

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

1. Ajax

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

Ajax 示例

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Example</title>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
     
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
            xhr.onreadystatechange = function () {
     
                if (xhr.readyState === 4 && xhr.status === 200) {
     
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>

2. Axios

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

安装 Axios

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

npm install axios

Axios 示例

<!DOCTYPE html>
<html>
<head>
    <title>Axios Example</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
     
            axios.get('https://jsonplaceholder.typicode.com/posts/1')
                .then(function(response) {
     
                    document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);
                })
                .catch(function(error) {
     
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</html>

3. Fetch

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

Fetch 示例

<!DOCTYPE html>
<html>
<head>
    <title>Fetch Example</title>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
     
            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then(response => response.json())
                .then(data => {
     
                    document.getElementById('result').innerHTML = JSON.stringify(data, null, 2);
                })
                .catch(error => {
     
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</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。

取消请求示例

<!DOCTYPE html>
<html>
<head>
    <title>Axios Cancel Request Example</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button id="startRequest">Start Request</button>
    <button id="cancelRequest">Cancel Request</button>
    <div id="result"></div>

    <script>
        let cancelTokenSource;

        document.getElementById('startRequest').addEventListener('click', function() {
     
            cancelTokenSource = axios.CancelToken.source();

            axios.get('https://jsonplaceholder.typicode.com/posts/1', {
     
                cancelToken: cancelTokenSource.token
            })
            .then(function(response) {
     
                document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);
            })
            .catch(function(error) {
     
                if (axios.isCancel(error)) {
     
                    console.log('Request canceled', error.message);
                } else {
     
                    console.error('Error:', error);
                }
            });
        });

        document.getElementById('cancelRequest').addEventListener('click', function() {
     
            if (cancelTokenSource) {
     
                cancelTokenSource.cancel('Request canceled by the user.');
            }
        });
    </script>
</body>
</html>