如何使用 JavaScript Fetch API 获取数据?
javascriptweb developmentfront end technology更新于 2024/6/2 11:56:00
如今，JavaScript 可用于编写前端和后端代码。此外，它是使用最广泛的编程语言。
此外，在开发实时应用程序时，我们需要从其他服务器获取数据。我们可以使用 API(应用程序编程接口)从其他服务器或数据库获取数据。
在这里，我们将学习使用 JavaScript 获取 API 以获取数据的各种方法。
使用 fetch() 方法
fetch() 是浏览器从 API 获取数据的方法。它将 API URL 作为获取数据所需的第一个参数，将选项作为第二个参数。选项可以包含标头和身份验证令牌。
语法
用户可以使用以下语法来 fetch() 获取数据。
fetch(baseURL)
.then(data => {
// 在此处使用数据
}
在上述语法中，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() 块来解析承诺。我们在 then() 块中使用了数据，在 catch() 块中使用了错误。
Using the Axios NPM package to fetch data from API
示例 3
在下面的示例中，我们使用 axios 通过 async/await 语法获取数据。我们已将 getData() 函数设为异步。此外，我们还将 await 关键字与 axios 结合使用，以暂停函数的执行，直到我们收到 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 () {
// 处理来自 API 的响应
}
xmlRequest.send();
在上述语法中，我们首先使用 open() 方法打开请求，然后使用 onload 事件处理来自 API 的响应。
示例 4
在下面的示例中，我们必须使用 XMLHttpRequest() Web API 创建一个自定义模块来从 API 中获取数据。customRequest() 函数包含自定义模块。
之后，我们通过将 URL 作为参数传递来调用 customRequest() 函数，并使用 then() 块来解析从 customRequest() 函数返回的承诺。
Using the XMLHttpRequest web API to fetch data from API
我们学习了三种从 API 获取数据的方法。最好的方法是使用浏览器的 fetch() 方法，因为我们不需要安装任何模块即可使用它。此外，用户应该使用具有 async/await 语法的所有模块。
相关文章
如何使用 JavaScript 查找三角形的面积?
如何使用原生 JavaScript 查找 div 的宽度?
如何查找所有元素是否包含相同的类?
如何使用 JavaScript 找到图像的平均颜色?
如何在 JavaScript 中查找 HTML 元素的位置?
如何在 JavaScript 中过滤嵌套对象?
如何在 JavaScript 中根据字段值过滤对象?
如何使用 object() 构造函数创建 JavaScript 对象?
如何使用 JavaScript 将消息打印到错误控制台?
如何打印 JavaScript 对象的内容?
打印
下一节 ❯❮ 上一节