前端开发小 - JavaScript - FormData的使用 + QS插件的请求改写成普通的请求

一、formData 介绍

• FormData 对象用以将 数据 编译成 键值对，以 使用 XMLHttpRequest 来发送数据。其 主要用于 发送 表单数据，但亦可用于发送 带键数据（keyed data），而独立于表单使用。
• 如果表单 enctype 属性设为 multipart/form-data，则会使用表单 submit() 方法来发送数据，从而，发送数据具有同样形式。
• MDN官方 - formData；

二、FormData 常用方法

2.1、创建 FormData 对象

• 语法：

  const formData = new FormData();
  

2.2、添加数据 - append

• 语法：

  formData.append('key', val);
  

• 注意：没有返回值（undefined）；

2.3、给 formData 对象设置属性值 - set

• 语法：

  formData.set('key', val);
  

• 注意：
  • 如果 key 存在，则是 更新 对应的 value（覆盖原有的value）；
  • 如果 key 不存在，则是添加一条新数据；

2.4、获取指定键的第一个值 - get

• 语法：

  formData.get('key');
  

• 返回值：字符串；
• ⚠ 注意：
  • 如果 formData 对象中没有该键，返回的是 null；

2.5、获取指定键的所有值 - getAll

• 语法：

  formData.getAll('key');
  

• 返回值：
  • 由 value 组成的 数组；
• 注意：
  • 如果 formData 中 没有对应的键，返回的则是一个 空数组；

2.6、删除数据 - delete

• 语法：

  formData.delete('key');
  

• ⚠ 注意：没有返回值（undefined）；

2.7、循环 formData 中的值 - forEach

• 语法：

  formData.forEach((value, key) => {
      console.log(value, key);
  })
  

2.8、判断 formData 对象中是否有某个键 - has

• 语法：

  formData.has('key');
  

• 返回值：
  • 布尔值；
  • 有对应的key，就是 true，否则就是 false；

2.9、获得 formData 中的所有键 - keys

• 语法：

  formData.keys();
  

• 返回值：
  • 包含的 所有键 的 Iterator 对象；
• 可以使用 for-of 循环得到key；
• 运行展示：
  

2.10、获得 formData 中的所有值 - vlaues

• 语法：

  formData.keys();
  

• 返回值：
  • 包含的 所有值 的 Iterator 对象；
• 可以使用 for-of 循环得到values；
• 运行展示：
  

2.11、formData 的 entries方法

• 语法：

  formData.entries();
  

• 返回值：
  • 该方法返回一个 iterator对象，此对象可以遍历访问 formData 中的键值对没，其中键值对的key是一个USVString 或者 Blob对象；

三、qs插件简介

3.1、什么是 qs 插件

• 具有一些附加安全性的 queryString 解析和字符串化库；
• 安装插件：
  • npm install qs；
• 使用：
  • 全局使用：
    • 目标文件：main.js

    // 导入 qs 插件
    import Qs form 'qs;
    
    // 直接挂载到Vue的原型上
    Vue.ptototype.$Qs = Qs;
    
    // 使用
    this.$Qs()
    

  • 局部使用：
    • 目标文件：要使用 qs 的 js文件；
    • 这里简单举个例子：

    //封装axios的post请求-序列化
    export function postStringify(url, data = {}) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url: url,
                data: Qs.stringify(data)
            })
            .then(response => {
                resolve(response.data)
            })
            .catch(error => {
                reject(error)
            })
        })
    }
    

3.2、用法

• 在前端调用后端接口的时候，需要传递参数，而常用传递参数的方式有以下几种：（这几种方式的区别大家可以去问度娘，这里给大家一个参考：前端后端数据传递的几种方式我也是参考了这位大佬的）；
  • JSON；
  • FormData；
  • path variable；
  • 表单；
• 参数是 FormData 的时候，我们就可以使用 Qs 插件了；
• QS.parse() 是将 URL解析成对象 的形式；
• Qs.stringify() 是将 对象序列化成URL 的形式，以&进行拼接；
• Qs插件会做URL编码；
• 代码展示：

const obj = {
    name: '红怡',
    age: 18,
    gender: '女'
};

const stringify = Qs.stringify(obj);

const parse = Qs.parse(stringify);

console.log(stringify);
// 对汉字会进行URL编码
// 结果展示：name=红怡&age=18&gender=女

console.log(parse);
// 结果展示：{name: '红怡', age: '18', gender: '女'}

3.3、将QS封装的请求改写成正常的请求

3.3.1、 Qs封装的请求

//封装axios的post请求-序列化
export function postStringify(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: Qs.stringify(data)
        })
        .then(response => {
            resolve(response.data)
        })
        .catch(error => {
            reject(error)
        })
    })
}

3.3.2、 改写成普通的请求

• 方式一：封装一个 POST序列化 的方法：

export function postStringify(url, data = {}) {
    const formData = new FormData();
    Object.keys(data).forEach(item => {
        formData.append(item, data[item])
    });
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            url,
            data: formData
        })
    })
}

• 方式二：在向接口函数传递数据的时候，使用 FormData 格式：

// 接口函数
export function getGoodsInfoAPI(data = {}) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            url: '请求地址',
            data
        })
    })
}

import { ref } from 'vue';
import { getGoodsInfoAPI } from '@/apis/user';

const goods = ref({
    id: 032156,
    name: '阿米洛嫦娥'
});

aysnc getGoodsInfo() {
    const formData = new FormData();
    Object.keys(goods.value).forEach(item => {
        formData.append(item, goods.value[item])
    });
    const res = await getGoodsInfoAPI(formData);
}

四、拓展 - URL编码

• URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符；
• 如果URL地址中需要包含中文字符，则必须对中文字符进行 编码（转义）；
• URl地址编码的原则：使用安全字符（没有特殊用途或者意义的可打印的字符）去表示哪些不安全的字符；
  • 使用 英文字符 去表示 非英文字符；
• 如何对URL地址进行 编码 和 解码
  • 编码：encodeURI()；
  • 解码：decodeURI()；
• 代码展示：

encodeURI('红怡');  // 红怡
decodeURI('红怡');  // 红怡
// 一个汉字 = %两个字符（字母或数字）

这篇好文章是转载于：学新通技术网