一、axios 请求取消
axios
请求取消,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios 请求取消</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="./node_modules/axios/dist/mine-axios.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">axios取消请求</h2>
<button class="btn btn-primary">发送请求</button>
<button class="btn btn-warning">取消请求</button>
</div>
<script>
const btns = document.querySelectorAll('button');
let cancel = null;
btns[0].onclick = function () {
if (cancel !== null) {
cancel();
}
let cancelToken = new axios.CancelToken(
function (c) {
cancel = c;
});
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
cancelToken: cancelToken
}).then(response => {
console.log(response);
cancel = null;
});
}
btns[1].onclick = function () {
cancel();
}
</script>
</body>
</html>
二、axios 请求取消的实现过程
axios
请求取消的实现过程,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios 请求取消的实现</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2 class="page-header">axios取消请求</h2>
<button class="btn btn-primary">发送请求</button>
<button class="btn btn-warning">取消请求</button>
</div>
<script>
function Axios (config) {
this.config = config;
}
Axios.prototype.request = function (config) {
return dispatchRequest(config);
}
function dispatchRequest (config) {
return xhrAdapter(config);
}
function xhrAdapter (config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(config.method, config.url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve({
status: xhr.status,
statusText: xhr.statusText
});
} else {
reject(new Error('请求失败'));
}
}
}
if (config.cancelToken) {
config.cancelToken.promise.then(value => {
xhr.abort();
reject(new Error('请求已经被取消'));
});
}
})
}
const context = new Axios({});
const axios = Axios.prototype.request.bind(context);
function CancelToken (executor) {
var resolvePromise;
this.promise = new Promise((resolve) => {
resolvePromise = resolve;
});
executor(function () {
resolvePromise();
});
}
const btns = document.querySelectorAll('button');
let cancel = null;
btns[0].onclick = function () {
if (cancel !== null) {
cancel();
}
let cancelToken = new axios.CancelToken(
function (c) {
cancel = c;
});
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
cancelToken: cancelToken
}).then(response => {
console.log(response);
cancel = null;
});
}
btns[1].onclick = function () {
cancel();
}
</script>
</body>
</html>