自学内容网 自学内容网

ChatGPT:fetch/xhr是什么意思

ChatGPT:fetch/xhr是什么意思



fetchXHR(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 几乎所有浏览器都支持。

在现代开发中,除非需要支持非常旧的浏览器,否则一般推荐使用 fetch



原文地址:https://blog.csdn.net/XRT_knives/article/details/140279810

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!