示例代码
express代码
javascript
复制代码
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代码
javascript
复制代码
<!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 = null
if (!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>
