工作日记

content-type

• Content-type（内容类型）与Accept
  • (1)、Accept代表发送端（客户端）希望接受的数据类型
    比如：Accept:text/xml;
    代表客户端希望接受的数据类型是xml类型
  • (2)、Content-type代表发送端（客户端|服务器）发送的实体数据的数据类型
    比如：Content-type:text/html;
    代表客户端发送的诗句格式是html

content-type速查

更全面的速查

• 常见的媒体格式类型：
  • text/html ： HTML格式
  • text/plain ：纯文本格式
  • text/xml ： XML格式
  • image/gif ：gif图片格式
  • image/jpeg ：jpg图片格式
  • image/png：png图片格式
• 以application开头的媒体格式类型：
  • application/json： JSON数据格式
  • application/pdf：pdf格式
  • application/msword ： Word文档格式
  • application/x-www-form-urlencoded ： <formencType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
• 另外一种常见的媒体格式是上传文件之时使用的：
  • multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

常见的content-type类型

(1)Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端

(2)Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端。 这应该是最常见的POST提交数据的方式了

(3)Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

接口数据的传输方式

• post请求：提交数据有两种数据传输方式，这两种方式浏览器是通过Content-Type来进行区分

  • 如果是 application/x-www-form-urlencoded的话，则为formdata方式

  • 如果是application/json或multipart/form-data的话，则为 request payload。

  实际操作遇到的问题：(qs.stringify的使用)
  
  🙋 问题：axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。也就是说，axios默认的请求头content-type类型是application/json;charset=utf-8 。但是实际我们后端要求的 'Content-Type': 'application/x-www-form-urlencoded' 为多见，这就与我们不符合
  
  🙎解决：利用qs，将参数转换为query参数

  • 引入 qs ，这个库是 axios 里面包含的，不需要再下载了。import Qs from 'qs'
  • 使用的qs将参数进行序列化。Qs.stringify(data) 注意：是否需要用qs去序列化参数完全取决于后端要怎么接受数据。下图👇

  

  qs.stringify和JSON.stringify的使用和区别

  • qs.stringify()将对象 序列化成URL的形式，以&进行拼接
  • JSON转换完就是JSON格式

  let  a = {name:'xixi',age:30};
  qs.stringify(a) // 'name=xixi&age=30'
  
  JSON.stringify(a) // '{"name":"xixi","age":30}'
  

• get请求：如果是GET请求，则为Query String Parameters方式