文章目录
- FileReader对象
- FormData对象
- Promise对象
- Response对象
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。
常用方法:
arrayBuffer()
: 返回一个 Promise,它将响应体解析为一个ArrayBuffer
。blob()
: 返回一个 Promise,它将响应体解析为一个Blob
。formData()
: 返回一个 Promise,它将响应体解析为一个FormData
对象。json()
: 返回一个Promise,它将响应体解析为一个JSON
对象。text()
: 返回一个Promise,它将响应体解析为一个字符串。clone()
: 创建一个Response对象的克隆。