如今，JavaScript 对于编写前端和后端代码非常有用。此外，它也是使用最广泛的编程语言。
此外，我们在开发实时应用程序时需要从其他服务器获取数据。我们可以使用 API（应用程序编程接口）从其他服务器或数据库获取数据。
在这里，我们将学习使用JavaScript获取数据的各种方法。
使用 fetch() 方法
fetch() 是浏览器从 API 获取数据的方法。它将 API URL 作为我们需要获取数据的第一个参数，将选项作为第二个参数。这些选项可以包含标头和身份验证令牌。
立即学习“Java免费学习笔记（深入）”；
语法
用户可以使用下面的语法来fetch()来获取数据。
fetch(baseURL)
.then(data => {
// use data here
}
在上面的语法中，baseURL是一个获取数据的API。
示例 1
在下面的示例中，当用户单击按钮时，它会执行 fetchData() 函数。在 fetchData() 函数中，我们使用 fetch() 方法从 API 获取数据。之后，我们处理了响应和错误。用户可以在输出中看到我们从 API 获取的数据。
Using the fetch() browser method to fetch data from API
使用 axios npm 包
axios 是一个 NPM 包，允许开发人员通过发出 GET、POST、PUT 等请求与 API 进行交互。这里，我们将使用 axios 发出 GET 请求来获取 JavaScript 中的数据。
语法
用户可以按照下面的语法使用axios从API获取数据。
axios.get(URL)
.then((response) => {
// use response
}
在上面的语法中，我们使用了 axios.get() 方法从 API 获取数据。
示例 2
在此示例中，我们使用从服务器或数据库获取的 then() 和 catch() 块来解析 Promise。我们利用了 then() 块中的数据和 catch() 块中的错误。
Using the Axios NPM package to fetch data from API
示例 3
在下面的示例中，我们使用 axios 通过 async/await 语法来获取数据。我们已将 getData() 函数设为异步。此外，我们在 axios 中使用了await关键字来暂停函数的执行，直到我们从API获得响应。
Using the Axios NPM package with Async/await syntax to fetch data from API
使用 XMLHttpRequest Web API
XMLHttpRequest Web API 允许我们创建模块来获取数据。我们可以创建一个对象并使用 XMLHttpRequest 对其进行初始化。之后，我们可以使用该对象来打开 GET 请求。
之后，我们可以在 XMLHttpRequest 加载时调用回调函数。回调函数可以获取响应状态并相应地返回响应或错误。
语法
const xmlRequest = new XMLHttpRequest();
xmlRequest.open('GET', apiURL);
xmlRequest.responseType = 'json';
xmlRequest.onload = function () {
// handle the response from API
}
xmlRequest.send();
在上面的语法中，我们首先使用 open() 方法打开请求，然后使用 onload 事件处理来自 API 的响应。
示例 4
在下面的示例中，我们必须使用 XMLHttpRequest() Web API 创建自定义模块以从 API 获取数据。 customRequest() 函数包含自定义模块。
之后，我们通过将 URL 作为参数传递来调用 customRequest() 函数，并使用 then() 块来解析从 customRequest() 函数返回的 Promise。
Using the XMLHttpRequest web API to fetch data from API
我们学习了从 API 获取数据的三种不同方法。最好的方法是使用 fetch() 浏览器的方法，因为我们不需要安装任何模块来使用它。此外，用户应该使用带有 async/await 语法的所有模块。
