当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 相遇时