背景
在前端开发中,网络请求是非常常见的操作。而有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用 Axios 发送请求时取消这些请求。
基本概念
在 Axios 中,取消请求的基本思路是创建一个用于取消的标记(cancel token),并将其与特定请求关联。当需要取消请求时,我们可以使用这个标记通知 Axios 取消发送该请求。
案例一:在组件即将卸载时取消请求
在下面代码中,我们在组件的状态中设置了cancelToken和source,它们是Axios提供的用于创建CancelToken的工具。在fetchData函数中,我们通过将source.token作为配置参数传递给Axios请求,从而将请求与CancelToken关联。
当组件即将卸载(即componentWillUnmount生命周期方法被调用时),我们调用source.cancel方法来取消所有未完成的请求,并清理相关资源。通过在请求中捕获错误,我们可以判断是否请求被取消,并进行相应的处理。
import axios from 'axios';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
isLoading: false,
cancelToken: axios.CancelToken,
source: axios.CancelToken.source(),
};
}
componentWillUnmount() {
// 组件卸载前取消所有未完成的请求
this.state.source.cancel('Operation canceled by the user.');
}
fetchData = () => {
this.setState({ isLoading: true }, () => {
axios.get('https://your-api.com/data', {
cancelToken: this.state.source.token,
})
.then(response => {
this.setState({ data: response.data, isLoading: false });
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled: ', error.message);
} else {
// Handle other errors
this.setState({ isLoading: false });
}
});
});
};
render() {
const { data, isLoading } = this.state;
return (
<div>
{isLoading ? <div>Loading...</div> : null}
{data ? <div>{data}</div> : null}
<button onClick={this.fetchData}>Fetch Data</button>
</div>
);
}
案例二:用户主动取消请求
假设我们要在 React 中发送一个数据请求,用户在请求发出后点击了“取消”按钮。首先,我们需要创建一个可取消的 Axios 实例,并将其用于发送请求。
import React, { useState } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState('');
const [request, setRequest] = useState(null);
const fetchData = async () => {
const source = axios.CancelToken.source();
setRequest(source);
try {
const response = await axios.get('/api/data', {
cancelToken: source.token
});
setData(response.data);
} catch (error) {
if (axios.isCancel(error)) {
console.log('请求被取消', error.message);
} else {
console.log('请求出错', error.message);
}
}
};
const cancelRequest = () => {
if (request) {
request.cancel('手动取消请求');
}
};
return (
<div>
<button onClick={fetchData}>发送请求</button>
<button onClick={cancelRequest}>取消请求</button>
<div>{data}</div>
</div>
);
}
export default App;
提示与注意事项
确保在组件卸载时取消请求,以免造成内存泄漏。
取消标记只能取消尚未完成的请求,无法取消已经完成的请求。
取消标记只能在特定的请求上使用一次,一旦使用过,就需要重新创建。