如何在JSON中使用fetch()?

1,412 阅读3分钟

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 ,但也适用于PUTPATCH 请求。

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