在前端开发中，我们经常需要从服务器获取数据并将其显示在网页上。这时候，我们就需要用到获取API或XMLHttpRequest（XHR）对象来进行数据请求。虽然它们都可以实现数据请求，但它们之间还是存在一些差异。
API
API是Application Programming Interface的缩写，即应用程序编程接口。它是一组定义了软件应用程序如何与其他组件交互的协议、规则和工具集。在前端开发中，Web API是指由JavaScript代码调用的浏览器提供的接口集合。
Web API包括DOM API、Canvas API、Geolocation API、WebSocket API等多种类型。其中，我们最常用的是Fetch API和XMLHttpRequest。
Fetch API
Fetch API是一种用于网络请求的新标准，它使用Promise对象处理异步操作。Fetch API的语法简洁明了，易于理解和使用，支持流式响应，并能够轻松地拦截请求和响应。
下面是一个使用Fetch API获取JSON数据的示例代码：
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));XMLHttpRequest
XMLHttpRequest是一种旧的标准，它被广泛用于Ajax技术中。它使用回调函数处理异步操作，但它的语法相对复杂，使用起来不太方便，容易出现回调地狱。
下面是一个使用XMLHttpRequest获取JSON数据的示例代码：
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.open('GET', 'https://example.com/data.json');
xhr.send();区别和指导意义
通过上述示例代码，我们可以看到Fetch API比XMLHttpRequest更简洁易用，并且支持流式响应。另外，由于Fetch API使用Promise对象处理异步操作，因此它避免了回调地狱的问题。
虽然XMLHttpRequest在一些浏览器中已经被废弃，但为了兼容性，我们仍然需要掌握它的使用方法。但如果你正在开发一个新的Web应用程序，建议使用Fetch API来进行数据请求。
最后，无论你选择哪种方式，都要记得正确处理错误和异常情况，以确保你的应用程序能够稳定运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13686