在JavaScript中，与服务器进行通信以拉取或发送数据是Web开发中的常见任务。随着技术的发展，我们从传统的XMLHttpRequest对象进化到了更加简洁和强大的fetch API。下面我将例举两个拉取 GitHub 组织成员信息的例子带你认识fetch API和传统的XMLHttpRequest对象。
1. XMLHttpRequest
XMLHttpRequest（简称XHR）是一个内置的Web API，用于在后台与服务器交换数据。它允许我们在不重新加载整个页面的情况下更新部分网页内容，这是Ajax技术的基础。
具体实现：
- 创建 XMLHttpRequest 对象：使用
new XMLHttpRequest()来实例化一个新对象。 - 配置请求：调用
open()方法来设置请求的方式（GET、POST等）、目标URL以及是否异步执行。 - 发送请求：通过
send()方法向服务器发送请求。对于GET请求，通常不需要参数，而对于POST请求，则可能需要传递数据作为参数。 - 监听状态变化：为
onreadystatechange事件添加回调函数，用于监测请求的状态变化。当readyState变为4且status为200时，表示请求成功完成，此时可以通过responseText获取返回的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest</title>
</head>
<body>
<ul id = memberList>
</ul>
<script>
const oUL = document.getElementById('memberList');
// fetch 的前辈 XMLHttpRequest
const xhr = new XMLHttpRequest(); // 实例化xhr请求对象
xhr.open('GET','https://api.github.com/orgs/lemoncode/members',false); // 打开请求
xhr.onreadystatechange = function(){ // 监听状态
if(xhr.readyState === 4 && xhr.status === 200){ // ztate 状态 4 完成 status 状态码 200 成功
// console.log(xhr.responseText);
const data = JSON.parse(xhr.responseText);
oUL.innerHTML = data.map(member => `
<li>
<img src="${member.avatar_url}" alt="">
<span>${member.login}</span>
</li>
`).join('');
}
}
xhr.send(); // 发送请求
</script>
</body>
</html>
2. fetch
fetch是ES6引入的一个新的API，旨在简化HTTP请求操作，并提供更好的Promise支持。相比XMLHttpRequest，它具有更清晰的语法结构和更强的功能集，例如内置对JSON的支持。
具体实现：
- 发起 fetch 请求：直接调用
fetch()函数并传入目标URL，可以指定请求方法和其他选项。 - 处理响应：
fetch()返回一个Promise，该Promise解析后得到的是Response对象。我们可以链式调用.json()方法将响应体解析为JSON格式。 - 使用数据：继续链式调用另一个
.then()来处理已经解析成JSON格式的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch</title>
</head>
<body>
<ul id = 'memberList'></ul>
<script>
const oUL =document.getElementById('memberList');
fetch('https://api.github.com/orgs/lemoncode/members')
.then(res=>res.json())
.then(data => {
//console.log(data)
oUL.innerHTML = data.map(member => `
<li>
<img src="${member.avatar_url}" alt="">
<span>${member.login}</span>
</li>
`).join('');
})
</script>
</body>
</html>
提示 : fetch默认采用异步模式，因此不会像XMLHttpRequest那样有阻塞问题。此外，需要注意的是，fetch不会自动拒绝非2xx状态码的响应；你需要手动检查response.ok或者response.status来确定请求是否成功。
3. 总结
虽然XMLHttpRequest仍然广泛存在于许多遗留项目中，但fetch因其简洁性和强大的特性成为了现代Web开发中的首选工具。如果你正在构建新的应用程序或模块，强烈建议使用fetch API来管理你的网络请求。同时，考虑到浏览器兼容性，确保你所针对的目标浏览器支持fetch，否则可能需要考虑使用polyfill。
如果觉得有帮助就点个赞再走吧，感谢支持
