AJAX常见请求方式-CSDN博客

1、Content-Type: application/json

import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})复制代码

请求的参数为 request Payload形式

2、Content-Type: application/x-www-form-urlencoded

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})复制代码

请求的参数为 from-data形式

3、Content-Type: multipart/form-data

import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})复制代码

multipart/form-data是基于post方法来传递数据的，并且其请求内容格式为Content-Type: multipart/form-data,用来指定请求内容的数据编码格式。另外，该格式会生成一个boundary字符串来分割请求头与请求体的，具体的是以一个boundary=${boundary}来进行分割，伪码如下：

...
Content-Type: multipart/form-data; boundary=${boundary} 

--${boundary}
...
...

--${boundary}--复制代码

上面boundary=${boundary}之后就是请求体内容了，请求体内容各字段之间以--${boundary}来进行分割,以--${boundary}--来结束请求体内容。具体可以参考下面例子：

form-data格式一般是用来进行文件上传的。

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

multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；
x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。

5、拓展FormData对象

利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); 
fetch('/users', {
  method: 'POST',
  body: formData
})复制代码

上面创建了一个FormData对象，通过fetch进行ajax请求时，会自动为其将其转为form-data格式，无需手动添加格式。

对象转FormData对象

于FormDat对象，像上面那种形式可以直接添加参数比较方便，但是对于对象或者嵌套对象：

 let userObj = {userName: ’xxx', age: '21'}
 formData.append('user', userObj)复制代码

上面形式添加formData参数user，并不会获取到其真正的内容，而是返回userObj的Object.prototype.toString.call(userObj)的值作为user字段的值。

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="user"

[object Object]复制代码

遗憾的是，FormData对象没有像JSON.stringify那样的方法能批量将对象形式转换为对应的形式，formData而言是将对象的key转换为正确formData请求参数字段名，例如如下对象：

var obj = {
    a: '2', 
    b: {c: 'test'}, 
    c: [ 
        {id: 1, name: 'xx'}, 
        {id:2 ,name: 'yy', info: {d: 4} }
    ]
}复制代码

这样转换为FormData对象时，其对应的key应该是下面这样的：

a: 2
b[c]: test
c[][id]: 1
c[][name]: xx
c[][id]: 2
c[][name]: yy
c[][info][d]:4复制代码

这样，就需要我们自己手动来实现一个转换数据函数，具体代码如下：

var objectToFormData =function(obj, form, namespace) {
      var fd = form || new FormData();
      var formKey;
      if(obj instanceof Array){
        for(var item of obj ){
          if(typeof item === 'object' && !(item instanceof File)){
            this.objectToFormData(item, fd, namespace+'[]');
          }else{
            // 若是数组则在关键字后面加上[]
            fd.append(namespace+'[]',item)
          }
 
        }
      }else{
        for(var property in obj) {
          if(obj.hasOwnProperty(property) && obj[property]) {
 
            if(namespace) {
              // 若是对象，则这样
              formKey = namespace + '[' + property + ']';
            } else {
              formKey = property;
            }
 
            // if the property is an object, but not a File,
            // use recursivity.
            if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
                // 此处将formKey递归下去很重要，因为数据结构会出现嵌套的情况
                this.objectToFormData(obj[property], fd, formKey);
            } else {
 
              // if it's a string or a File object
              fd.append(formKey, obj[property]);
            }
 
          }
        }
      }
      return fd;
 
    };复制代码