关于post的请求体类型

---

Http请求

HTTP请求中 header query 和 body的区别

header显而易见是请求头

query是指请求的参数，一般是指URL中？后面的参数

如http://10.6.6.6:8080/api/v1/namespaces?pretty=true中 pretty=true就是query

body是指请求体中的数据

前端发送请求最常用的是get请求还有post请求
get请求只能传query参数，query参数都是拼在请求地址上的
post可以传body和query两种形式的参数

body的类型

在开发中我们使用post请求，一般会把data放在body中，接下来介绍几种常见的body类型

application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据

提交数据如下：

Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=Java&age = 23

如果前端使用axios发起网络请求，建议使用qs进行序列化。
qs能够将对象序列化为URL

• qs.stringify()

      const Qs = require('qs'); 
      let obj= { method: "one", projectId: "85", appToken: "abc"};
      Qs.stringify(obj);
      
      //结果
      method=one&projectId=85&appToken=abc

以登录接口为简单示例

首先封装axios请求（注：这里使用的是ts语法）

const axiosReq = axios.create({
    baseURL: "/api/",
    timeout: 200000,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
});

export class Request {
    protected commonUrl: string = "";

    public get(url: string): Promise<any> {
        return axiosReq.get(this.commonUrl + url);
    }

    public post(url: string, data?: any): Promise<any> {
        return axiosReq.post(this.commonUrl + url, data);
    }
    public upload(url: string, data: any): Promise<any> {
        return axiosReq.post(this.commonUrl + url, data, {
            headers: { "Content-Type": "multipart/form-data;boundary="+ new Date().getTime()},
        });
    }
}

使用qs序列化成url

class UserRequest extends Request{
 login(data:{
        username:string,
        password:string
    }){
        return this.post("user/login",qs.stringify(data))
    }
   }

之后在对应的vue文件中调用就好
这里传入的data就是json对象，qs会将其序列化成url，传入body中

  login(){
            userManager.login({username:"admin",password:"1234"})
            }

multipart/form-data

这又是一个常见的 POST 数据提交的方式，一般用做文件提交
就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。

这里以一个今天刚写的代码为例

首先是简单的封装，这里需要更改请求头为multipart/form-data类型，同时要生成一个随机的boundary用作分割

public upload(url: string, data: any): Promise<any> {
        return axiosReq.post(this.commonUrl + url, data, {
            headers: { "Content-Type": "multipart/form-data;boundary="+ new Date().getTime()},
        });
    }

以注册接口为例，这里与以往不太一样的是，我需要同时上传基础文本和文件。这里的数据类型要用FormData，无论后端接口要什么参数，我们只需要把所有的数据都封装进formData这个对象中，springboot会帮我们解析。

registUser(formData:FormData){
        return this.upload("/user/regist",formData)
    }

 fd=new FormData()
 registUser(){
  this.fd.append('upload',this.file)
  this.fd.append('username',this.userData.username)
  this.fd.append('password',this.userData.password)
  this.fd.append('roleId',this.userData.roleId)
  this.fd.append('gender',this.userData.gender)
  this.fd.append('entryTime',this.userData.entryTime)
  this.fd.append('name',this.userData.name)
  this.fd.append('phone',this.userData.phone)
  userRequest.registUser(this.fd).then(res=>{
               if(res.data.status==200){
                   this.visible=false
                   this.$message.success('添加成功！');
                   this.userData={}
                   this.getUsers()
                   this.isspin=false
               }
           })
 }

application/json

application/json 。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。

raw

可以上传任意格式的文本，可以上传text、json、xml、html等

binary

相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。

multipart/form-data与x-www-form-urlencoded区别

multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；

x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的