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

概述

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

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

构造函数

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

1. 创建一个空对象实例

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 的其他方法

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