JavaScript（JS）学习笔记 6 常用的JS内置对象（FileReader对象 FormData对象 Promise对象）

FileReader对象

基本作用：对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

• 异步读取的概念：在执行读取操作时，不会阻塞或中断其他JavaScript代码的执行。

创建语法：

var reader = new FileReader()

常用事件（新方式下的）：这些事件会分别在读取过程中的某个阶段触发：

• loadstart: 当读取开始时触发。
• progress: 在读取过程中触发，可以用来显示进度。
• load: 当读取成功完成时触发。
• abort: 当读取操作被中断时触发。
• error: 当读取操作发生错误时触发。
• loadend: 当读取操作完成时（无论成功还是失败）触发。

常用方法：

• readAsArrayBuffer(blob): 读取指定的 Blob 或 File 对象，并在读取完成后以 ArrayBuffer 对象的形式存储结果，表示原始二进制数据。
• readAsDataURL(blob): 读取指定的 Blob 或 File 对象，并在读取完成后以数据URL（Base64编码）的形式存储结果。
• readAsText(blob, encoding): 读取指定的 Blob 或 File 对象，并在读取完成后以文本形式存储结果。encoding 参数指定文本的编码类型，默认为 “utf-8”。

获取读取结果：可以通过 FileReader 对象的 result 属性获取读取的结果。

FormData对象

基本概述：在HTML5中引入的一个JS内置对象，主要用于通过一组键值对的方式表示表单字段和其对应的值。该对象可以模拟HTML中表单提交的行为，向服务器发送一组表单数据，而不需要真正在HTML界面中创建一个表单。

创建语法：有两种常用的创建方式：

• 创建一个空的对象：var 对象名 = new FormData()
• 基于已有的表单数据创建一个对象：var 对象名 = new FormData(HTML表单元素)

向表单中添加数据：

FormData对象名.append('数据的键', ‘数据的值’)

判定表单中是否存在某个键：

FormData对象名.has(键名)

读取表单中的数据：由于表单数据主要是装配后用来发送，因此读取操作使用情况很少。

• 读取表单中某个键的第一个值：FormData对象名.get(键名)
• 读取表单中某个键的所有值：FormData对象名.getAll(键名)

删除表单中的数据：

FormData对象名.delete(键名)

向服务器发送表单数据：

• 可以通过 XMLHttpRequest 对象发送表单数据，具体语法略。
• 可以通过 fetch API 发送表单数据，具体语法略。

Promise对象

基本作用：用于表示异步操作最终完成或失败的一个对象，提供了一种更为优雅的方式来处理异步操作的结果。

对象状态：一个Promise对象有以下三种状态。对象状态只能由待定变为已兑现或已拒绝，并且状态一旦改变，就不会再变。

• 待定（Pending）：初始状态，既不是成功，也不是失败状态。
• 已兑现（Fulfilled）：意味着操作成功完成。
• 已拒绝（Rejected）：意味着操作失败。

创建语法：可以通过 new Promise() 构造函数来创建一个新的Promise对象。构造函数接收一个执行器函数（executor function），该函数接收两个参数：resolve 和 reject。

• resolve：当异步操作成功时调用，并将结果作为参数传递出去。
• reject：当异步操作失败时调用，并将错误信息或拒绝的原因作为参数传递出去。

then方法的使用：添加异步操作解决时的回调函数，也可以添加异步操作拒绝时的回调函数。它返回一个新的Promise对象，因此在JS代码中可以链式调用，表示上一个异步操作结束后进行的下一个异步操作。