Skip to content

Instantly share code, notes, and snippets.

@semlinker
Last active June 4, 2023 07:10
Show Gist options
  • Save semlinker/e426780664f0186db434882f1e27ac3a to your computer and use it in GitHub Desktop.
Save semlinker/e426780664f0186db434882f1e27ac3a to your computer and use it in GitHub Desktop.
Axios 取消重复请求
<!DOCTYPE html>
<html lang="zh-cn">
<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>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<h3>Axios 取消重复请求示例</h3>
<button onclick="sendRequest()">发起请求</button>
<script>
const pendingRequest = new Map();
function generateReqKey(config) {
const { method, url, params, data } = config;
return [method, url, Qs.stringify(params), Qs.stringify(data)].join(
"&"
);
}
function addPendingRequest(config) {
const requestKey = generateReqKey(config);
config.cancelToken =
config.cancelToken ||
new axios.CancelToken((cancel) => {
if (!pendingRequest.has(requestKey)) {
pendingRequest.set(requestKey, cancel);
}
});
}
function removePendingRequest(config) {
const requestKey = generateReqKey(config);
if (pendingRequest.has(requestKey)) {
const cancel = pendingRequest.get(requestKey);
cancel(requestKey);
pendingRequest.delete(requestKey);
}
}
axios.interceptors.request.use(
function (config) {
removePendingRequest(config); // 检查是否存在重复请求,若存在则取消已发的请求
addPendingRequest(config); // 把当前请求添加到pendingRequest对象中
return config;
},
(error) => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
(response) => {
removePendingRequest(response.config); // 从pendingRequest对象中移除请求
return response;
},
(error) => {
removePendingRequest(error.config || {}); // 从pendingRequest对象中移除请求
if (axios.isCancel(error)) {
console.log("已取消的重复请求:" + error.message);
} else {
// 添加异常处理
}
return Promise.reject(error);
}
);
async function sendRequest() {
console.dir(pendingRequest);
const response = await axios.get(
"https://jsonplaceholder.typicode.com/todos/1"
// "https://localhost:3000/todos/1"
);
console.log(response.data);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment