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
