当fetch() 与 JSON 相遇时

当fetch() 与 JSON 相遇时

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

{
  "name": "前端开发",
  "id": "mybjfront",
  "isVillain": true,
  "friends": []
}

在这篇文章中,将介绍如何使用 fetch() API getpost 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。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 当fetch() 与 JSON 相遇时

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们