Axios取消请求 - ToB企服应用市场:ToB评测及商务社交产业平台

const http = require('http')
const url = require('url')
const server = http.createServer()
server.on('request', (req, res) => {
console.log('Someone visit our web server')
const method = req.method
const URL = req.url
console.log(`Your request url is ${URL}, and request method is ${method}`)
if (req.method === 'OPTIONS') {
console.log('OPTIONS')
res.writeHead(200, {
'Access-Control-Allow-Origin': 'http://127.0.0.1:8080',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With, x-custom-header',
'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, OPTIONS',
'Access-Control-Allow-Credentials': 'true'
})
res.end()
return // 确保在 OPTIONS 请求中及时返回，不再继续处理请求
}
if (method === 'GET') {
const { query } = url.parse(URL)
const params = {}
if (query.includes('&')) {
query.split('&').forEach(item => {
const queryPair = item.split('=')
params[queryPair[0]] = queryPair[1]
})
} else {
const queryPair = query.split('=')
params[queryPair[0]] = queryPair[1]
}
const tab = params['tab']
// 设置跨域响应头
res.writeHead(200, {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://127.0.0.1:8080',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With',
'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, OPTIONS',
'Access-Control-Allow-Credentials': 'true' // 添加此行
})
// 把内容发送给客户端
res.end(JSON.stringify(`Now it is the content of tab ${tab}`))
}
})
server.listen(8081, () => {
console.log('server running at http://127.0.0.1:3000')
})

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cancelDemo</title>
<style>
.box {
position: relative;
margin: 0 auto;
margin-top: 60px;
width: 400px;
height: 540px;
border: 2px solid #000;
border-radius: 10px;
}
.box .content {
margin: 20px;
width: 360px;
height: 400px;
border: 2px solid #efefef;
border-radius: 10px;
text-align: center;
}
.box .tab {
position: absolute;
display: flex;
justify-content: space-evenly;
align-items: center;
bottom: 0;
width: 100%;
height: 60px;
border-top: 2px solid #9a9da3;
border-radius: 5px;
}
.box .tab .btn {
padding: 10px 20px;
height: 40px;
background-color: #4479e1;
box-sizing: border-box;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">Now it is the content of tab 1</div>
<div class="tab">
<div class="btn" data-index="1">tab 1 </div>
<div class="btn" data-index="2">tab 2 </div>
<div class="btn" data-index="3">tab 3 </div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="module" src="./index.js"></script>
</body>
</html>

复制代码

const tab = document.querySelector('.tab')
tab.addEventListener('click', e => {
if (e.target.className !== 'btn') return
const index = e.target.dataset.index
axios({
method: 'GET',
url: `http://127.0.0.1:3000/index?tab=${index}`
}).then(res => {
document.querySelector('.content').innerHTML = res.data
})
})

复制代码

// request/index.js
export const server = axios.create({
baseURL: 'http://127.0.0.1:8081/',
timeout: 3000,
headers: {
'X-Custom-Header': 'foobar',
}
})

复制代码

// request/tab.js
import {server} from './index.js'
// 切换tab的请求
export const getTabContentAPI = async (index, cfg) => {
cfg = cfg || {}
return await server.get(`index?tab=${index}`, cfg)
}

复制代码

import { getTabContentAPI } from "./request/tab.js"
const tab = document.querySelector('.tab')
const CancelToken = axios.CancelToken
let cancelFn
const getTabContent = async index => {
if (index == 3) cancelFn(`取消了tab${index}的上一个请求`)
const res = await getTabContentAPI(index, {
cancelToken: new CancelToken(c => cancelFn = c)
})
return res
}
tab.addEventListener('click', async e => {
if (e.target.className !== 'btn') return
const index = e.target.dataset.index
const res = await getTabContent(index)
document.querySelector('.content').innerHTML = res.data
})

复制代码

// index.js
import { getTabContentAPI } from "./request/tab.js"
const tab = document.querySelector('.tab')
const CancelToken = axios.CancelToken
const isCancel = axios.isCancel
let cancelFnArr = []
const getTabContent = async index => {
if (cancelFnArr.length > 0) {
cancelFnArr.pop()(`取消了tab${index}的上一个请求`)
}
const res = await getTabContentAPI(index, {
cancelToken: new CancelToken(c => cancelFnArr.push(c))
})
return res
}
tab.addEventListener('click', async e => {
if (e.target.className !== 'btn') return
const index = e.target.dataset.index
try {
const res = await getTabContent(index)
document.querySelector('.content').innerHTML = res.data
} catch(err) {
if (isCancel(err)) {
console.log('请求被取消', err.message)
} else {
console.log('请求出错', err.message)
}
}
})

复制代码