解决AbortController中断请求无法再次请求

示例代码

express代码

const express = require('express')
const app = express()//导入cors跨域中间件
const cors = require('cors')
// 全局注册，加前缀
app.use(cors())app.get('/list', (req, res) => {// 直接返回对象console.log('接收到的参数是', req.query)//结束本次请求,设置响应体:返回给用户内容setTimeout(() => {res.send({ message: 'success', code: 2000, data: [{ name: '张三', age: 18 }] })}, 4000)
})app.post('/data', (req, res) => {setTimeout(() => {res.send({ message: 'success', code: 2000, data: [{ name: '张三666', age: 18 }] })}, 4000)
})app.listen('3000', () => {console.log('服务启动成功')
})

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><button onclick="sendGet()">get请求</button><button onclick="sendPost()">post请求</button><button onclick="cancel()">取消</button></body><script>// 初始化 controller 为 null，用来处理中止请求后无法再次发请求let controller = nullif (!controller) {function sendGet() {controller = new AbortController()fetch('http://localhost:3000/list?name=haha&age=19', {signal: controller.signal}).then((res) => {if (res.ok) {return res.json()}}).catch((err) => {console.log(err)})}function sendPost() {controller = new AbortController()fetch('http://localhost:3000/data', {method: 'POST',body: JSON.stringify(),headers: {'Content-Type': 'application/json'},signal: controller.signal}).then((res) => {console.log(res)})}}function cancel() {controller.abort() // 取消请求controller = ''}</script>
</html>