自定义异步请求中的formData参数

概述

这篇文章里边要讲的是在html非表单提交时模拟表单数据，就是将普通的对象数据进行一个简单的封装，使之成为期望的form-data数据向后台发起请求。
首先需要了解FormData 和 Content-Type: multipart/form-data

FrmData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
form-data：就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。

构造函数

创建一个formData对象实例有几种方式

创建一个空对象实例

var form = new formData();

此时可以调用append(key, value)方法往form实例里边添加数据。
首先，我们要明确formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾，我用第一步中实例化过的form举例：

form.append('checked', 'A')

form.append('checked', 'B')

form.append('userName', 'Susan')

// 此时的form键值对应该是：
// checked: ['A', 'B']
// userName: 'Susan'

在此我将需要向后台传送的数据封装在一个命名为objToFormData的方法中。代码如下：

/**
 * objToFormData
 * @param {Object}
 * @returns {formData}
 * 将接口参数转换为formData格式
 */
export const objToFormData = (obj) => {
    let data = new FormData()
    for (let i in obj) {
        data.append(i, obj[i])
    }
    return data
}

如上封装，每次调用接口我都只需要在传参时候调用objToFormData()方法即可：

2. 除此之外，也可以使用已有的表单来初始化一个对象实例

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");

formData的操作方法

1.获取formData中的key/value值:get()/getAll()

从图上的代码中不难看出，get()方法获取到的是value的第一个值，而getAll()方法获取到的是一个数组，无论key对应的value原来是什么数据类型（对比getAll('name')和getAll('age')）

2. 修改formData中某key的值set()

同样的，set()方法重新设置value,也是可以修改数据类型的。

3.删除formData中的key/value值:delete()

4.formData的其他方法

常用的就是以上四种，其他的方法在做判断或者遍历等等均可用到，具体依业务场景而定。

zheyuanjiaojun