自定义异步请求中的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()

clipboard.png

4.formData的其他方法

图片描述

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

阅读 2.4k

好好学习,天天向上~~~

137 声望
6 粉丝
0 条评论

好好学习,天天向上~~~

137 声望
6 粉丝
文章目录
宣传栏