AbortController👀

AbortController👀

AbortController接口表示一个控制器对象,允许你根据需要中止一个或多个 Web请求。你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController 。使用AbortSignal 对象可以完成与与DOM请求的通信。

构造函数

AbortController.AbortController() 创建一个新的AbortController 对象实例。

属性

AbortController.signal 只读
返回一个AbortSignal对象实例,它可以用来 with/abort 一个Web(网络)请求。

方法

AbortController.abort()
中止一个尚未完成的Web(网络)请求。这能够中止fetch 请求,任何响应Body的消费者和流。

example

AbortController example

示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Web AbortController</p>

<div class="controller">
<button class="download">download video</button>
<button class="abort">stop download network</button>
</div>
<script>
const url = './sintel.mp4'
const downloadBtn = document.querySelector('.download')
const abortBtn = document.querySelector('.abort')

let controller

downloadBtn.addEventListener('click', fetchVideo)
abortBtn.addEventListener('click', () => {
controller.abort()
console.log('stop download')
})

function fetchVideo() {
controller = new AbortController()
const signal = controller.signal
fetch(url, { signal }).then((response) => {
if (response.status === 200) {
return response.blob()
} else {
throw new Error('Failed to fetch')
}
}).then((vBlob) => {
console.log('----download success----')
console.log(vBlob)
})
}
</script>
</body>
</html>

参考

MDN AbortController

Something wrong with this article? Click here to submit your revision.

Vector Landscape Vectors by Vecteezy

作者

blacklisten

发布于

2020-10-22

许可协议

CC BY-NC-SA 4.0

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×