数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript Fetch API 获取数据？
如今，JavaScript 可用于编写前端和后端代码。此外，它也是最广泛使用的编程语言。
此外，在开发实时应用程序时，我们需要从其他服务器获取数据。我们可以使用 API（应用程序编程接口）从其他服务器或数据库获取数据。
在这里，我们将学习使用 JavaScript 获取 API 数据的各种方法。
使用 fetch() 方法
fetch() 是浏览器中用于从 API 获取数据的方法。它将 API URL 作为第一个参数（我们需要获取数据），并将选项作为第二个参数。选项可以包含标头和身份验证令牌。
语法
用户可以使用以下语法使用 fetch() 获取数据。
fetch(baseURL)
.then(data => {
// use data here
}
在上述语法中，baseURL 是获取数据的 API。
示例 1
在下面的示例中，当用户单击按钮时，它将执行 fetchData() 函数。在 fetchData() 函数中，我们使用了 fetch() 方法从 API 获取数据。之后，我们处理了响应和错误。用户可以在输出中看到我们从 API 获取的数据。
<html>
<body>
<h2>Using the <i> fetch() browser method </i> to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "fetchData()"> Fetch API to get data </button>
<script>
let output = document.getElementById('output');
function fetchData() {
fetch('https://dummyjson.com/products/1')
.then(response => response.json())
.then(data => {
output.innerHTML += "id = " + data.id + "<br/>";
output.innerHTML += "brand = " + data.brand + "<br/>";
output.innerHTML += "category = " + data.category + "<br/>";
output.innerHTML += "price = " + data.price + "<br/>";
output.innerHTML += "rating = " + data.rating + "<br/>";
output.innerHTML += "stock = " + data.stock + "<br/>";
})
}
</script>
</body>
</html>
使用 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() 块中使用了错误。
<html>
<head>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
<h2>Using the <i> Axios NPM package </i> to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "fetchData()"> Fetch data using Axios </button>
<script>
let output = document.getElementById('output');
function fetchData() {
axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
output.innerHTML += "userId : " + response.data.userId + "<br/>";
output.innerHTML += "id : " + response.data.id + "<br/>";
output.innerHTML += "title : " + response.data.title + "<br/>";
output.innerHTML += "completed : " + response.data.completed + "<br/>";
})
.catch((err) => {
output.innerHTML += "The error is - " + err + "<br/>";
})
}
</script>
</body>
</html>
示例 3
在下面的示例中，我们使用了 axios 来使用 async/await 语法获取数据。我们将 getData() 函数设置为异步的。此外，我们还在 axios 中使用了 await 关键字，以暂停函数的执行，直到我们从 API 获取响应。
<html>
<head>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"></script>
</head>
<body>
<h2>Using the <i> Axios NPM package </i> with Async/await syntax to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "getData()"> get data using Axios </button>
<script>
let output = document.getElementById('output');
async function getData() {
let response = await
axios.get("https://jsonplaceholder.typicode.com/todos/1")
for (let key in response.data) {
output.innerHTML += key + " - " + response.data[key] + "<br/>";
}
}
</script>
</body>
</html>
使用 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。
<html>
<body>
<h2>Using the <i> XMLHttpRequest web API </i> to fetch data from API</h2>
<div id = "output"> </div>
<button onclick = "getData()"> get data </button>
<script>
let output = document.getElementById('output');
const customRequest = (apiURL) => {
return new Promise((res, rej) => {
// Create a new Object of XMLHttpRequest
const xmlRequest = new XMLHttpRequest();
// open a get request
xmlRequest.open('GET', apiURL);
// set response type
xmlRequest.responseType = 'json';
xmlRequest.onload = function () {
// resolve the promise when we get a successful response
if (xmlRequest.status == 200) {
res(xmlRequest.response);
} else {
// reject promise on error
rej(xmlRequest.response);
}
};
// send request
xmlRequest.send();
});
};
// making the get request from URL
const getData = async () => {
try {
const data = await customRequest(
'https://dummyjson.com/products/1',
);
output.innerHTML += "category = " + data.category + "<br/>";
output.innerHTML += "price = " + data.price + "<br/>";
output.innerHTML += "rating = " + data.rating + "<br/>";
output.innerHTML += "stock = " + data.stock + "<br/>";
} catch (err) {
output.innerHTML += "The error is : " + err + "<br/>";
}
};
</script>
</body>
</html>
我们学习了三种不同的从 API 获取数据的方法。最好的方法是使用浏览器的 fetch() 方法，因为我们不需要安装任何模块即可使用它。此外，用户应该将所有模块与 async/await 语法一起使用。
19K+ 次浏览
