JSON是一种简单的结构化数据格式，已经成为在网络上发送数据的一种流行格式。
下面是一个JSON的例子，它包含一个带有道具和值的对象。
{
"name": "Joker",
"city": "Gotham",
"isVillain": true,
"friends": []
}
在这篇文章中，我将指导你如何使用fetch() API来加载（通常使用GET 方法）或发布数据（通常使用POST 方法）JSON数据。
1.1.回顾fetch()
fetch() 接受2个参数:
const response = await fetch(urlOrRequest[, options]);
fetch() 的第一个强制性参数是请求的URL，或者一般是一个请求对象。
options，可选的第二个参数，让你配置请求。最有用的选项是:
options.method：用于执行请求的HTTP方法。默认值是'GET'options.body:HTTP请求的主体option.headers: 一个带有头信息的对象，用于附加到请求中。
调用fetch() 开始一个请求并返回一个承诺。当请求完成时，该承诺会解析为响应对象。
响应对象提供了有用的方法来从多种格式中提取数据。但是要从JSON中解析数据，你只需要一个方法 -response.json() 。
2.获取JSON数据
让我们从路径/api/names ，获取JSON格式的人员列表。
async function loadNames() {
const response = await fetch('/api/names');
const names = await response.json();
console.log(names);
// logs [{ name: 'Joker'}, { name: 'Batman' }]
}
loadNames();
await fetch('/api/names') 开始一个 请求，并在请求完成后对响应对象进行评估。GET
然后，从服务器的响应中，你可以使用await response.json() 将JSON解析成一个普通的JavaScript对象（注意：response.json() 返回一个承诺！）。
默认情况下，fetch() 执行的是GET 请求。但你总是可以明确指出HTTP方法。
// ...
const response = await fetch('/api/names', {
method: 'GET'
});
// ...
2.1 明确要求JSON
一些API服务器可能使用多种格式。JSON、XML等。这就是为什么这些服务器可能要求你指明所发布数据的格式。
要做到这一点，你需要使用headers 选项，并特别将Accept 头部设置为application/json ，明确要求JSON。
// ...
const response = await fetch('/api/names', {
headers: {
'Accept': 'application/json'
}
});
// ...
3.POSTJSON数据
POST-向服务器发送JSON数据稍显棘手。
首先，你需要在fetch() 上设置几个参数，特别是将HTTPmethod 表示为'POST' 。
其次，你需要在body 参数中设置字符串化为JSON的对象。
async function postName() {
const object = { name: 'James Gordon' };
const response = await fetch('/api/names', {
method: 'POST',
body: JSON.stringify(object)
});
const responseText = await response.text();
console.log(responseText); // logs 'OK'
}
postName();
看看body 选项值。JSON.stringify(object) 工具函数用于将一个JavaScript对象转化为JSON字符串。
body option接受一个字符串，但不接受一个对象。
这种方法在执行POST ，但也适用于PUT 或PATCH 请求。
3.1 明确发布JSON
同样，一些服务器可能要求你明确指出你的POST (或PATCH, 或PUT)数据是JSON格式。
在这种情况下，你可以表明你要推送的数据的内容类型，特别是将Content-Type 头部设置为application/json 。
// ...
const object = { name: 'James Gordon' };
const response = await fetch('/api/names', {
method: 'POST',
body: JSON.stringify(object),
headers: {
'Content-Type': 'application/json'
}
});
// ...
4.使用一个请求对象
options 在上面的例子中，我是用fetch() 的参数来设置method,headers, 和body 。
但有时你可能想把请求数据封装成一个对象，特别是在实现一个中间件时。你可以使用Request构造函数的相同选项来创建请求对象。
例如，让我们通过创建一个请求对象来发布JSON数据。
// ...
const object = { name: 'James Gordon' };
const request = new Request('/api/names', {
method: 'POST',
body: JSON.stringify(object),
headers: {
'Content-Type': 'application/json'
}
});
const response = await fetch(request);
// ...
5.总结
这几乎是你使用fetch() 加载或发布JSON数据到服务器所需的所有主要信息了。
当加载数据时，确保使用const object = await response.json() 方法从响应中提取和解析JSON到一个实际的对象。
但是当发布JSON数据时，确保使用JSON.stringify(object) 将字符串化的对象表示为JSON字符串。将JSON分配给请求的body 选项。
