js 原生构造函数
# js 原生构造函数
# 文件上传 FileReader
// 当选择文件后，使用FileReader API读取文件，返回数据
let reader = new FileReader()
reader.onload = (ev) => {
try {
const result = JSON.parse(ev.target.result)
console.log(result)
} catch (e) {
console.log(e)
}
}
// onloadstart：读取文件开始时触发
// onprogress：读取过程中触发，会返还本次读取文件的最大字节数和已经读取完毕的字节数，可以用来做进度条
// onabort：在读取中断时触发
// onerror：在读取文件失败时触发
// onload：在读取完成时触发
// onloadend：读取结束后触发，不论成功还是失败都会触发，触发时机在onload之后
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 解析dom DOMParser
将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM
new DOMParser().parseFromString(str,'text/html')
1
# 中断请求 AbortController
表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。
const controller = new AbortController();
const signal = controller.signal
// 终止请求
controller.abort()
function fetchVideo() {
const controller = new AbortController();
const signal = controller.signal
fetch(url, {signal})
.then(response => {
console.log(response)
})
.catch(err => {
console.error(err)
})
}
// 注意： 当 abort() 被调用时，这个 fetch() promise 将 reject 一个名为 AbortError 的 DOMException。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# controller 实例属性 signal
signal 返回一个 AbortSignal 实例对象，该对象可以根据需要处理 DOM 请求通信，既可以建立通信，也可以终止通信.
# controller 实例方法 abort
abort() 方法会在 DOM 请求完成之前中止它。它能够中止 fetch 请求、各种响应主体或者流的消耗。
# 静态方法 AbortSignal.timeout
指定时间后将自动中止的 AbortSignal
try {
const res = await fetch(url, { signal: AbortSignal.timeout(5000) })
}catch(){
}
1
2
3
4
2
3
4
# MutationObserver
提供了监视对 DOM 树所做更改的能力