前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >通过 Apifox Echo 了解 Content-Type 及对应的请求体编码

通过 Apifox Echo 了解 Content-Type 及对应的请求体编码

作者头像
山月
发布2023-01-10 11:09:40
2.9K1
发布2023-01-10 11:09:40
举报
文章被收录于专栏:服务器运维笔记

我们在与后端接口联调中,你知道请求体可以由哪几种类型,以及对应的 Content-Type 是多少吗?

今天以 Apifox Echo1 演示一下不同 Content-Type 的 HTTP 报文。关于 Apifox Echo 可查看我以前的文章:通过 Apifox Echo 学习 curl/httpie 命令2。

查看原文 https://www.apifox.cn/a1shanyue

查看原文 https://juejin.cn/post/7144185993393143839

Content Type

当前端向后端请求 API 接口时,不同类型的 Content-Type 对应不同的请求体(Request Body)。

  • aplication/json:请求体为 JSON
  • application/x-www-form-urlencoded:请求体为以 & 分割的字符串,如 a=3&b=4
  • multipart/form-data:请求体以 Boundary 分割

在使用 curl 时,可以通过参数 --data/-d 配置请求体(Request Body)。

可通过 Apifox Echo1 进行测试,如果接收到的是 JSON,则会放置于 json 字段,Form 则会置于 form 字段。

查看原文 https://www.apifox.cn/a1shanyue

代码语言:javascript
复制
# 使用 Form 发送请求
$ curl -X POST echo.apifox.com/post -H "content-type: application/x-www-form-urlencoded" -d 'a=3&b=4'
{
  "args": {},
  "data": "", 
  "files": {}, 
  "form": {
    "a": "3",
    "b": "4"
  }, 
  "headers": {
    "Accept": "*/*", 
    "Content-Length": "3", 
    "Content-Type": "application/x-www-form-urlencoded", 
    "Host": "echo.apifox.com", 
    "User-Agent": "curl/7.79.1", 
    "X-Amzn-Trace-Id": "Root=1-63454557-3cd5f9a53682be3a327dd0a3"
  }, 
  "json": null, 
  "url": "http://echo.apifox.com/post"
}

# 使用 JSON 发送请求
$ curl -X POST echo.apifox.com/post -H "content-type: application/json" -d '{"a": 3, "b": 4}'
{
  "args": {}, 
  "data": "{\"a\": 3, \"b\": 4}",
  "files": {}, 
  "form": {}, 
  "headers": {
    "Accept": "*/*", 
    "Content-Length": "8", 
    "Content-Type": "application/json", 
    "Host": "echo.apifox.com", 
    "User-Agent": "curl/7.79.1", 
    "X-Amzn-Trace-Id": "Root=1-63454532-1aa1d82138215128077cd85d"
  }, 
  "json": {
    "a": 3
  }, 
  "url": "http://echo.apifox.com/post"
}

另外,在 Apifox3 中也可以配置其 Content-Type 以及对应的请求体编码。

查看原文 https://www.apifox.cn/a1shanyue

fetch API

因此,我们前端通过 fetch API 发送请求,携带 body 时,需要:

  1. 配置 content-type
  2. 配置为对应 content-type 的 data。比如为 JSON 时,需要手动 JSON.stringify 进行编码,为 Form(即 application/www-form-url-encoded)时,通过 URLSearchParams API4 进行编码。 查看原文 https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

fetch API 中,对请求体总是最纯正原始的编码方案,但也更有助于我们理解 HTTP 中的 Content-Body 以及请求体。

可将以下代码输入浏览器控制台进行尝试。

代码语言:javascript
复制
// 对于 application/json 的数据需要手动 JSON.stringify
await fetch('https://echo.apifox.com/post', {
  method: 'POST',
  body: JSON.stringify({
    a: 3,
    b: 4
  }),
  headers: {
    'content-type': 'application/json'
  }
}).then(res => res.json())

// 对于 application/www-form-url-encoded 的数据也需要手动编码
await fetch('https://echo.apifox.com/post', {
  method: 'POST',
  body: new URLSearchParams({ a: 3, b: 4}),
  headers: {
    'content-type': 'application/www-form-url-encoded'
  }
}).then(res => res.json())

axios

axios5 这种更进一步封装的请求库,将会自动指定 Content-Type 以及对数据进行自动编码。

查看原文 https://github.com/axios/axios

可将以下代码输入浏览器控制台进行尝试。

代码语言:javascript
复制
const axios = await import('https://cdn.skypack.dev/axios').then(r => r.default)

// 将自动是 JSON 格式,并自动对 object 进行序列化
axios.post('https://echo.apifox.com/post', { a: 3, b: 4 })

关于 axios 更多请查看axios 中的请求体编码6。

查看原文 https://axios-http.com/zh/docs/urlencoded

作业

  1. 使用 Apifox Echo 测试 json/form,并观察请求体
  2. 如何对 JSON/Form 数据进行序列化作为 Body 在 fetch API 中发送
  3. 如何基于 fetch API 实现简单的类似 axios,使得对请求体简单封装

参考资料

[1]

Apifox Echo:https://www.apifox.cn/a1shanyue

[2]

通过 Apifox Echo 学习 curl/httpie 命令:https://juejin.cn/post/7144185993393143839

[3]

Apifox Echo:https://www.apifox.cn/a1shanyue

[4]

Apifox:https://www.apifox.cn/a1shanyue

[5]

URLSearchParams API:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

[6]

axios:https://github.com/axios/axios

[7]

axios 中的请求体编码:https://axios-http.com/zh/docs/urlencoded

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-11-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈成长之路 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Content Type
  • fetch API
  • axios
  • 作业
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档