我们发送网络请求一般有2种方式:
1.XMLHttpRequest 也就是常说的XHR, axios封装的就是它
2.fetch
然后,能够做到真正中断网络传输的只有fetch, 我们使用的axios里面的取消网络请求不是真正的取消.
取消请求需要使用一个对象AbortController
客户端: index.html
<!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>
name: <input type="text" id="name">
<hr>
<div>
来自服务器: <div id="content"></div>
</div>
<script>
const nameDOM = document.getElementById('name');
const contentDOM = document.getElementById('content');
let controller = null;
function send(value) {
// 每次发送新的请求前先取消上次请求
controller && controller.abort();
controller = new AbortController();
fetch('http://localhost:8848/list?name=' + value, {
method: 'GET',
signal: controller.signal
})
.then(data => data.json())
.then((res) => {
console.log(res);
contentDOM.innerHTML = JSON.stringify(res);
})
.catch((err)=>{
console.log(err);
console.log(err.message);
});
}
nameDOM.oninput = function (e) {
send(nameDOM.value);
}
</script>
</body>
</html>
服务器: server.js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/list', (req, res, next)=>{
setTimeout(() => {
res.send({
success: true,
data: {
tmp: Date.now(),
originValue: req.query.name
}
});
}, 100);
});
app.listen(8848, ()=>{
console.log('监听完毕');
});
