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

🕗 发布于 2024-10-04 07:12 javascript 学习笔记

文章目录

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：当异步操作成功时调用，并将结果作为 resolve 方法的参数传递出去。
reject：可选参数。当异步操作失败时调用，并将错误信息或拒绝的原因作为参数传递出去。

使用方式：该对象的一种典型使用语法如下所示：

Promise.then(function(result) {
    // 处理成功结果
}).catch(function(error) {
    // 处理错误
}).finally(function() {
    // 总是执行
});

.then() 方法用于注册当 Promise 成功时的回调函数。
.catch() 方法用于注册失败时的回调函数。尽管在 .then() 方法中可以修改 reject 参数来设置 Promise 被拒绝时的回调函数，但是更推荐使用 .catch 方法来进行处理，因为其语义更加清晰。
.finally() 方法用于无论成功或失败都会执行的回调函数。

链式调用：这是 Promise 最强大的特性之一，允许将多个异步操作串联起来，使代码更加清晰和易于维护。

基本概念：链式调用在一个 Promise 完成后，直接返回另一个 Promise，从而形成一个操作链。每个 .then() 方法都可以返回一个新的 Promise ，这样就可以继续调用下一个 .then()。
执行逻辑：在链式调用中，每个 .then() 方法都可以接收到前一个 .then() 返回的值。如果 .then() 没有返回值，则默认返回 undefined。如果返回一个普通值（非Promise），这个值会被传递给下一个 .then() 。
错误处理：在链式调用中，如果任何一个 Promise 被拒绝，错误会被传递到最近的 .catch() 方法。如果没有 .catch() ，错误将会被抛出。
中断方式：可以在 .then() 或 .catch() 中返回一个处于 Pending 状态的 Promise。这样，后续的 .then() 或 .catch() 将不会被执行。

箭头函数：在 Promise 对象中常以箭头函数作为该函数的参数。下面对箭头函数进行介绍：

基本概念：是 ECMAScript 2015 中引入的一种编写函数表达式的新语法，提供了一种更简洁的方式来书写函数。
使用语法：(param1, param2...) => {...函数体...}
- 如果传入的参数只有一个，则可以省略括号，表示为：param => {函数体}。
- 如果函数体中只有一个表达式，则可以省略花括号，语法为：(param1, param2...) => expression。并且，该表达式的值就会作为函数的返回值。

Response对象

基本概念：在JavaScript中，特别是在使用 Fetch API 进行网络请求时，Response 对象是网络请求成功后返回的响应结果。这个对象是一个Promise被成功解决后的返回值，它包含了从服务器返回的响应信息。

常用属性：

status: 一个整数（例如200），代表响应的HTTP状态码。
statusText: 一个字符串代表响应的状态信息，例如"OK"。
ok: 一个布尔值，如果HTTP状态码为200-299，则为true。
headers: 一个包含响应头信息的 Headers 对象。
type: 一个枚举值，表示响应类型，可以是basic, cors, default, error, opaque, 或 opaqueredirect。
url: 响应的URL。