目录
注意：
1、Axios实现
2、Fetch实现
3、XHR实现
注意：
当请求被取消时，只会本地停止处理此次请求，服务器仍然可能已经接收到了并处理了该请求。开发时应当及时和后端进行友好沟通。
1、Axios实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="getData()">获取数据</button>
<button onclick="cancel()">取消请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
<script>
// 创建一个取消令牌
const CancelToken = axios.CancelToken
// 用于存储取消函数
let cancelFn = null
function getData() {
// 发起请求
axios
.get('http://127.0.0.1:3000/data', {
cancelToken: new CancelToken(function executor(c) {
cancelFn = c // 保存取消函数
}),
})
.then(response => {
// 请求成功时处理响应
console.log('拿到数据:', response.data)
})
.catch(error => {
// 处理错误
if (axios.isCancel(error)) {
// 如果是取消请求的错误，输出相关信息
console.log('请求已取消:', error.message)
} else {
// 处理其他类型的请求错误
console.error('请求失败:', error)
}
})
}
function cancel() {
// 调用取消函数，传入取消的原因
cancelFn && cancelFn('取消请求') // 取消请求
}
</script>
</body>
</html>
2、Fetch实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="getData()">获取数据</button>
<button onclick="cancel()">取消请求</button>
<script>
let controller = null
function getData() {
// 创建一个AbortController实例
controller = new AbortController()
// 发起请求
fetch('http://127.0.0.1:3000/data', { signal: controller.signal })
.then(response => {
if (!response.ok) {
throw new Error('获取数据失败')
}
return response.json()
})
.then(data => {
console.log(data)
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('Fetch请求已取消')
} else {
console.error('Fetch请求错误:', error)
}
})
}
function cancel() {
controller && controller.abort() // 取消请求
}
</script>
</body>
</html>
3、XHR实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="getData()">获取数据</button>
<button onclick="cancel()">取消请求</button>
<script>
let xhr = null
function getData() {
// 创建一个新的 XMLHttpRequest 对象
xhr = new XMLHttpRequest()
// 配置请求
xhr.open('GET', 'http://127.0.0.1:3000/data', true)
// 定义回调函数
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
console.log('响应结果:', xhr.responseText)
} else {
console.error('响应失败:', xhr.status)
}
}
xhr.onerror = function () {
console.error('请求失败')
}
// 发送请求
xhr.send()
}
function cancel() {
xhr && xhr.abort() // 取消请求
}
</script>
</body>
</html>
