ChatGPT：fetch/xhr是什么意思

fetch 和 XHR（XMLHttpRequest）是两种用于在客户端与服务器之间进行异步通信的方法。在网页开发中，它们用于从服务器获取数据或将数据发送到服务器，而不需要刷新整个页面。

fetch

fetch 是一种现代的、基于 Promise 的 API，用于执行 HTTP 请求。它提供了一个更简单、更灵活的方式来发起网络请求，并处理响应数据。fetch 是现代浏览器中推荐使用的方法。

示例

// 发起 GET 请求
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });

// 发起 POST 请求
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

优点

基于 Promise，处理异步操作更简洁。
更加语义化和易读。
支持更高级的功能，如流（Streams）和请求与响应的克隆。

XMLHttpRequest (XHR)

XMLHttpRequest 是一种较旧的 API，用于在客户端与服务器之间交换数据。尽管名字里带有 “XML”，它可以用于处理任何类型的数据，不仅限于 XML。

示例

// 发起 GET 请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};
xhr.onerror = function () {
    console.error('There was a network error.');
};
xhr.send();

// 发起 POST 请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};
xhr.onerror = function () {
    console.error('There was a network error.');
};
xhr.send(JSON.stringify({ key: 'value' }));

优点

广泛兼容性：几乎所有的浏览器都支持 XMLHttpRequest。
可以在老旧项目中使用，保持兼容性。

比较

易用性：fetch 使用 Promise，更容易处理异步操作和链式调用，而 XMLHttpRequest 使用回调函数，代码往往更复杂。
功能性：fetch 支持现代浏览器的高级功能，如请求与响应的流和克隆；XMLHttpRequest 则有一些功能限制。
错误处理：fetch 通过 .catch 方法处理网络错误，更加直观；而 XMLHttpRequest 需要通过 onerror 事件处理错误。
浏览器支持：fetch 可能在较旧的浏览器中不受支持，而 XMLHttpRequest 几乎所有浏览器都支持。