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
选项。