当前位置：首页 > article >正文

fetch 与 xmlHttpRequest 请求总结

article 2024/11/5 15:52:58

文章目录

- fetch 、XMLHttpRequest、ajax 简要介绍
- fetch 与 xmlHttpRequest 比较

fetch 、XMLHttpRequest、ajax 简要介绍

Fetch API
- 概述
  - Fetch是一种现代的JavaScript API，用于在浏览器中进行网络请求。它提供了一种更灵活、更强大的方式来获取资源，相比传统的XMLHttpRequest具有更简洁的语法和更好的Promise集成。
- 请求参数和方法
  - 基本语法：fetch(url, options)。其中url是要请求的资源的URL地址，options是一个可选的配置对象，用于配置请求的各种参数。
  - 请求方法：在options对象中，可以通过method属性设置请求方法，如GET、POST、PUT、DELETE等。例如：{method: 'POST'}。
  - 请求头：使用headers属性设置请求头。例如，设置Content - Type为application/json：{headers: {'Content - Type': 'application/json'}}。
  - 请求体：对于POST、PUT等请求，可以通过body属性发送请求体数据。如果是发送JSON数据，可以先将JavaScript对象转换为JSON字符串，如{body: JSON.stringify({key: 'value'})}。

应用实例
- 简单的GET请求获取数据：

fetch('https://example.com/api/data')
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.error(error));

POST请求发送数据：

const dataToSend = {name: 'John', age: 30};
fetch('https://example.com/api/submit', {
    method: 'POST',
    headers: {'Content - Type': 'application/json'},
    body: JSON.stringify(dataToSend)
})
   .then(response => response.json())
   .then(result => console.log(result))
   .catch(error => console.error(error));

注意事项
- Fetch默认不会发送或接收cookies。如果需要发送cookies，需要在options对象中设置credentials属性为'include'。
- 当接收到的响应状态码不是200 - 299范围时，fetch不会自动抛出错误。需要手动检查response.ok属性来处理错误情况。例如：

fetch('https://example.com/api/data')
   .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
   .then(data => console.log(data))
   .catch(error => console.error(error));

XMLHttpRequest（XHR）
- 概述
  - XMLHttpRequest是一种较老的用于在JavaScript中进行HTTP请求的技术。它允许网页从服务器获取数据而无需刷新页面，是实现Ajax（Asynchronous JavaScript and XML）的核心对象。
- 请求参数和方法
  - 创建对象：首先要创建一个XMLHttpRequest对象，如var xhr = new XMLHttpRequest();。
  - 打开请求：使用open方法来初始化一个请求，语法为xhr.open(method, url, async)。其中method是请求方法（如GET、POST等），url是请求的URL，async是一个布尔值，表示请求是否异步进行（通常为true）。例如：xhr.open('GET', 'https://example.com/api/data', true);。
  - 设置请求头：通过setRequestHeader方法设置请求头。例如：xhr.setRequestHeader('Content - Type', 'application/json');。
  - 发送请求：使用send方法发送请求。对于GET请求，一般不需要传递参数，即xhr.send(null)；对于POST请求，可以在send方法中传递请求体数据，如xhr.send(JSON.stringify({key: 'value'}))。
- 应用实例
  - 简单的GET请求：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send(null);

    - `POST`请求：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/submit', true);
xhr.setRequestHeader('Content - Type', 'application/json');
var dataToSend = {name: 'John', age: 30};
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        console.log(result);
    }
};
xhr.send(JSON.stringify(dataToSend));

注意事项
- 由于XMLHttpRequest的事件驱动模型，需要注意readyState属性的变化。readyState的值从0到4，表示请求的不同阶段，当readyState为4时，表示请求已完成。
- 跨域请求时，需要服务器端正确配置CORS（跨域资源共享），否则会出现跨域错误。

Ajax（Asynchronous JavaScript and XML）
- 概述
  - Ajax不是一种新的技术，而是一种使用现有技术（如XMLHttpRequest或Fetch）实现的在网页中进行异步数据交互的模式。它允许网页在不刷新整个页面的情况下更新部分内容，提供了更好的用户体验。
- 请求参数和方法（使用XMLHttpRequest为例）
  - 其请求参数和方法基本与XMLHttpRequest相同，因为XMLHttpRequest是实现Ajax的主要方式之一。在Ajax模式下，重点是如何处理异步响应并更新页面内容。
- 应用实例
  - 假设有一个网页，需要根据用户输入的城市名称获取天气信息并显示在页面上，而不刷新整个页面。可以这样实现：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Weather Example</title>
    <script>
        function getWeather() {
            var city = document.getElementById('cityInput').value;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.example.com/weather?city=' + city, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var weatherData = JSON.parse(xhr.responseText);
                    document.getElementById('weatherResult').innerHTML = 'Temperature: ' + weatherData.temperature + ', Condition: ' + weatherData.condition;
                }
            };
            xhr.send(null);
        }
    </script>
</head>
<body>
    <input type="text" id="cityInput" placeholder="Enter city name">
    <button onclick="getWeather()">Get Weather</button>
    <div id="weatherResult"></div>
</body>
</html>

注意事项
- 性能方面，频繁的Ajax请求可能会影响性能，特别是在移动设备上。需要合理控制请求的频率和数据量。
- 安全性方面，要注意防范跨站脚本攻击（XSS）和跨域安全问题。在处理服务器返回的数据时，要进行适当的验证和过滤。同时，确保服务器正确配置CORS来处理跨域请求。

fetch 与 xmlHttpRequest 比较

性能对比

网络请求阶段
- 连接建立：
  - XMLHttpRequest：在传统的XMLHttpRequest中，每次请求都需要经历完整的连接建立过程。例如，在低带宽环境下，建立新的TCP连接可能会引入一定的延迟。
  - Fetch：它底层同样依赖于浏览器的网络请求机制，在连接建立方面没有本质上的性能优势，但由于其简洁的API设计，在一些复杂的网络请求场景下可能更容易优化。
- 请求发送和接收：
  - XMLHttpRequest：它可以发送和接收各种类型的数据，但在处理复杂的数据格式转换（如JSON）时，可能需要额外的代码来处理响应数据。这可能会导致在数据处理阶段产生一些性能损耗。
  - Fetch：它原生支持多种数据格式的处理，如response.json()、response.text()和response.blob()等方法，可以更方便地处理不同类型的数据。在数据接收阶段，对于JSON数据的处理，Fetch可以直接将其转换为JavaScript对象，相对高效。
异步处理模型
- XMLHttpRequest：采用事件驱动的异步处理模型，需要监听readystatechange事件来判断请求的状态。例如，在readyState达到4（表示请求完成）且status为200（表示成功）时才能处理响应数据。这种模型相对复杂，代码的可读性和维护性可能会受到影响，并且在处理多个请求时，容易出现状态混乱的情况。
- Fetch：基于Promise的异步处理方式使得代码结构更加清晰。通过then()和catch()方法可以很方便地处理请求成功和失败的情况，并且多个Fetch请求可以方便地通过链式调用或者async/await进行组合和顺序控制，减少了回调嵌套带来的性能损耗（如避免了“回调地狱”）。
内存占用和资源管理
- XMLHttpRequest：在一些老旧的浏览器实现中，可能存在内存泄漏的风险，特别是在频繁创建和销毁XMLHttpRequest对象，或者处理大型响应数据时，如果没有正确地释放资源，可能会导致内存占用过高。
- Fetch：在现代浏览器中，Fetch API在资源管理方面相对较好。它能够更好地与浏览器的垃圾回收机制配合，并且在处理流数据（如部分加载大型文件）时，可以更灵活地控制内存占用，避免一次性加载过多的数据导致内存溢出。

应用对比
- 简单数据获取场景（如加载配置文件）
  - XMLHttpRequest：
    - 示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'config.json', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var config = JSON.parse(xhr.responseText);
        // 使用配置数据
    }
};
xhr.send(null);

应用特点：在简单的数据获取场景下，XMLHttpRequest可以完成任务，但代码相对繁琐，需要关注readyState和status的变化来处理响应。
- Fetch：
- 示例代码：

fetch('config.json')
 .then(response => response.json())
 .then(config => {
        // 使用配置数据
    })
 .catch(error => console.error(error));

应用特点：使用Fetch的代码更加简洁明了，通过链式调用直接处理JSON数据，非常适合这种简单的异步数据获取场景，能够提高开发效率。
- 复杂数据交互场景（如表单提交和文件上传）
  - XMLHttpRequest：
    - 示例代码（以表单提交为例）：

var form = document.getElementById('myForm');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var result = JSON.parse(xhr.responseText);
        // 处理提交结果
    }
};
form.addEventListener('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(form);
    var serializedData = '';
    for (var pair of formData.entries()) {
        serializedData += pair[0] + '=' + pair[1] + '&';
    }
    serializedData = serializedData.slice(0, -1);
    xhr.send(serializedData);
});

应用特点：在复杂的数据交互场景下，XMLHttpRequest需要手动处理请求头、表单数据序列化等操作，并且要小心处理异步事件。代码的复杂性随着功能的增加而显著增加。
- Fetch：
- 示例代码（以表单提交为例）：

var form = document.getElementById('myForm');
form.addEventListener('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(form);
    fetch('submit.php', {
        method: 'POST',
        body: formData
    })
 .then(response => response.json())
 .then(result => {
        // 处理提交结果
    })
 .catch(error => console.error(error));
});

应用特点：Fetch在处理复杂数据交互场景时，代码简洁性的优势更加明显。它可以直接使用FormData对象作为请求体，减少了数据处理的步骤，并且通过Promise的方式方便地处理响应。
- 流数据处理场景（如实时数据推送或大型文件下载）
  - XMLHttpRequest：
    - 示例代码（以部分下载大型文件为例）：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'largeFile.zip', true);
xhr.onprogress = function (e) {
    if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log(percentComplete + '% downloaded');
    }
};
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var fileData = xhr.response;
        // 处理文件数据
    }
};
xhr.send(null);

应用特点：XMLHttpRequest可以通过onprogress事件来监听文件下载的进度，但在处理流数据的细节方面（如如何高效地逐块处理数据）相对复杂，并且对于复杂的流数据应用场景（如实时数据推送的复杂业务逻辑）可能需要更多的自定义代码来实现。
- Fetch：
- 示例代码（以部分下载大型文件为例）：

fetch('largeFile.zip')
 .then(response => {
        const reader = response.body.getReader();
        let receivedLength = 0;
        const contentLength = response.headers.get('Content-Length');
        function readData() {
            return reader.read().then(({ done, value }) => {
                if (done) {
                    return;
                }
                receivedLength += value.length;
                var percentComplete = (receivedLength / contentLength) * 100;
                console.log(percentComplete + '% downloaded');
                // 进一步处理数据块
                if (receivedLength < contentLength) {
                    return readData();
                }
            });
        }
        return readData();
    })
 .catch(error => console.error(error));