fetch() 与 JSON 的碰撞

发表于 3年以前 | 总阅读数：235 次

JSON是一种结构化数据的简单格式，下面是一个包含带有 props 和 values 的对象的 JSON 示例：

{
  "name": "公众号",
  "id": "FedJavaScript",
  "isVillain": true,
  "friends": []
}

在这篇文章中，将介绍如何使用 fetch() API get 和 post JSON 数据。

1. 调用fetch()

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers (en-US)。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

fetch() 接受 2 个参数，一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwNjI5MTYyMw==')

可选的第二个参数，用于配置请求，例如：

{
  method:'POST',
  body: JSON.stringify(data),
  headers: {
    'content-type': 'application/json'
  }
}

2.GET JSON

让我们从路径中获取/api/namesJSON 格式的人员列表：

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 对象。

默认情况下fetch()执行GET请求。但是您始终可以明确指出 HTTP 方法：

// ...
const response = await fetch('/api/names', {
  method: 'GET'
});
// ...

显示 GET JSON

某些 API 服务器可能使用多种格式：JSON、XML 等。这就是这些服务器可能要求您指明发布数据的格式的原因。

为此，需要使用 headers 选项，将 Accept 标头设置application/json 以显式请求 JSON：

// ...
const response = await fetch('/api/names', {
  headers: {
    'Accept': 'application/json'
  }
});
// ...

3. POST 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();

这种方法适用于执行POST, 及 PUT 或 PATCH 请求。

3.1 显式 POST JSON

同显示 GET JSON 一样，指明 headers：

// ...
const object = { name: 'James Gordon' };

const response = await fetch('/api/names', {
  method: 'POST',
  body: JSON.stringify(object),
  headers: {
    'Content-Type': 'application/json'
  }
});
// ...