因为再开发中遇见一个问题,前端发起一个请求之后,服务端很久没响应,然后前端又重新发起了
其实很简单
如果是fetch
let controller = null
controller && controller.abort() // 取消请求
controller = new AbortController()
const data = fetch('https://xxxxx',{
signal: controller.signal // 重点
})
如果是axios
当然还有另外一个方式 CancelToken,但是我不会
import axios from 'axios';
let reqMap = new Map()
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
let oldControl = reqMap.get(config.url)
oldControl && oldControl.abort() // 取消请求
const controller = new AbortController()
config.signal = controller.signal
reqMap.set(config.url,config)
return config;
},
error => {
console.log(error); // for debug
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
reqMap.delete(response.config.url)
return response;
},
error => {
console.log('err' + error); // for debug
return Promise.reject(error);
}
);
export default service
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。