使用 Fetch API 获取和发布
在本文中，我将讨论如何使用 javascript fetch API 向公共 API 获取和发布数据。
先决条件
- 文本编辑器（Notepad++、VSCode、Atom、Bracket、Sublime，或任何你喜欢的文本编辑器）
- 浏览器（Chrome、Moxilla）
- 您可以选择任何服务器（WAMP、XAMPP），如果您使用 VScode，也可以安装 live-server 扩展；如果您使用 Atom，也可以安装 atom-live-server；或者
npm install –g live-server如果您的机器上安装了 node，也可以直接安装 npm live server。
引言
Fetch API 是 JavaScript ES6 内置的Promise，用于简化 XMLHttpRequest 的异步 GET 或 POST 数据请求。虽然有很多库可以简化 XMLHttpRequest 的编写，使其更易于阅读，其中最流行的是 jQuery 的 Ajax，但 Fetch API 允许我们使用原生 JavaScript 编写 XMLHttpRequest 请求，而无需导入任何库。
以下是简单的 fetch() 回调函数的语法
#fetch Syntax
fetch(url)
.then(function (res) {
return res, json()
})
.then(function (data) {
Console.log(data);
}).catch(function (err) {
console.log(err)
})
如何使用 Fetch API 从 API 获取数据
- 创建一个目录，名称随意，我这里命名为 fetchAPI。你可以使用传统的创建目录的方式，在目录下创建一个 index.html 文件，或者也可以在终端中使用以下代码。
//create directory
mkdir fecthAPI
//enter the fecthAPI folder
cd fetchAPI
//create an index.html file
touch index.html
- 让我们添加基本的 html 标签，两个按钮标签，id 分别为 id="getData" 和 id="getAPI"，以及一个段落标签，id='result'。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fetch API</title>
</head>
<body>
<button id="getData">GET DATA FROM LOCAL</button>
<button id="getData">GET DATA FROM API </button>
<p id="result"></p>
</body>
</html>
这些按钮将用于向本地 sampleUser.json 文件和公共 API 发送 GET 请求。有很多公共 API 可以获取数据，例如GitHub API和Random User API。但在本例中，我们将使用JSONPlaceholder API，这是一个用于生成随机用户的 API。
- 创建 javascript 事件监听器来处理 index.html 文件中的点击事件。
<script>
document.getElementById('getData').addEventListener('click', getData);
document.getElementById('getAPI').addEventListener('click', getAPI);
function getData(){
// code to execte
}
function getAPI(){
// code to execte
}
</script>
- 让我们使用 Fetch API 从本地文件中获取数据，以便更好地了解如何操作本地文件。创建一个名为“sampleUsers.json”的 JSON 示例文件，尝试从中获取数据。>注意：为了方便访问，请将 sampleUsers.json 文件创建在与 index.html 文件相同的文件夹中。
[
{
"id": 1,
"name": "Ahmad Abdul-Aziz",
"email": "Ahmad.abdulaziz37@gmail.com"
},
{
"id": 2,
"name": "Ahmad Habib Hussein",
"email": "Ahmadhabibhussein@mail.com"
},
{
"id": 3,
"name": "Abdullahi Aminu",
"email": "Aminuawesome@mail.com"
},
{
"id": 4,
"name": "Idris Muhammad",
"email": "rismad@mail.com"
}
]
好的，现在让我们编写 fetch() 脚本，从你刚刚创建的 sampleUser.json 文件中获取数据，并将结果输出到 index.html 文件中。
注意：请在 getData() 函数内部编写脚本。
//getData function
//Using javascript ES5 function
fetch('sampleUser.json')
.then(function (res) {
return res.json();
})
.then(function (data) {
let result = `<h2> User Info From sampleUser.json </h2>`;
data.forEach((user) => {
const { id, name, email } = user
result +=
`<div>
<h5> User ID: ${id} </h5>
<ul class="w3-ul">
<li> User Name : ${name}</li>
<li> User Email: ${email} </li>
</ul>
</div>`;
document.getElementById('result').innerHTML = result;
});
})
好了，一切就绪。运行代码。“耶！”简单又快捷，对吧？我们将使用相同的方法从真实的 API 获取数据，但这次需要提供 API 端点。
注意：请在 getAPI() 函数内部编写脚本。
//sampleUser.json is replaced by an API endpoint.
//Using ES6 arrow function
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => { return res.json() })
.then((data) => {
let result = `<h2> Random User Info From Jsonplaceholder API</h2>`;
data.forEach((user) => {
const { id, name, email, address: { city, street } } = user
result +=
`<div>
<h5> User ID: ${id} </h5>
<ul class="w3-ul">
<li> User Full Name : ${name}</li>
<li> User Email : ${email} </li>
<li> User Address : ${city}, ${street} </li>
</ul>
</div>`;
document.getElementById('result').innerHTML = result;
});
})
太好了，现在我们可以从本地的 sampleUser.json 文件和 Jsonplaceholder API 获取数据了。接下来，我们执行 POST 操作。
如何使用 Fetch API 向 API 发送 POST 数据
- 在我们的 index.html 文件中，我们添加一个 id='postData' 的表单，包含两个输入框和一个提交按钮。
<form id="postData">
<div>
<input type="text" name="" id="tittle">
</div>
<div>
<textarea name="" id="body" cols="20" rows="5"></textarea>
</div>
<input type="submit" value="SEND POST">
</form>
- 添加一个事件监听器来处理表单中的提交按钮。
document.getElementById('postData').addEventListener('submit', postData);
function postData(event){
event.preventDefault();
let tittle = document.getElementById('tittle').value;
let body = document.getElementById('body').value;
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers : new Headers(),
body:JSON.stringify({tittle:tittle, body:body})
}).then((res) => res.json())
.then((data) => console.log(data))
.catch((err)=>console.log(err))
}
使用 preventDefault() 方法可以阻止浏览器执行默认操作。您可以根据需要处理响应，但在此示例中，我们将把它输出到控制台。
结论
本教程到此结束。感谢您阅读至此。
本文仅对如何使用 Fetch API 进行 GET 和 POST 数据请求进行简单介绍。欢迎进一步探索：
你可以在我的 GitHub 仓库（仓库链接）上找到使用w3schools CSS样式化的最终源代码，并查看演示。别忘了给仓库点个星标哦！
如果您想了解更多信息，请访问Mozilla fetchAPI。
请在推特上关注我@dev_amaz，如果您需要任何帮助，请随时与我联系。您也可以发送电子邮件至Ahmad.abdulaziz37@gmail.com。
文章来源：https://dev.to/devamaz/using-fetch-api-to-get-and-post--1g7d