当fetch() 与 JSON 相遇时

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

{
  "name": "前端开发",
  "id": "mybjfront",
  "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://地址.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: '码云笔记'}, { name: '前端教程' }]
}

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: '码云笔记' };
  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: '码云笔记' };

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

4. 总结

如果要在不支持的浏览器中使用 Fetch，可以使用 Fetch Polyfill。

以上关于当fetch() 与 JSON 相遇时的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。