reactjs - 在 Reactjs 中通过 axios 取消我的 POST 请求
问题描述
我曾经发布获取数据的请求,因为我想通过发送一些过滤器从服务器获取数据。
如何取消我的承诺通过 Reactjs 中的 onClick 按钮获取数据?
当我们有多个参数过滤数据时,使用HTTP post方法选择数据是否正确?
我找到了地址,但它不起作用:
const CancelToken = axios.CancelToken;
let cancel;
function handleProductSearch() {
var newModel=searchProductFilter;
const token = localStorage.token;
if (token) {
// Cancel previous request
if (cancel !== undefined) {
cancel();
setLoadingListResSrch(false)
}
axios.post(baseUrl + 'Basic/ProductSearch', newModel, {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
}),
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'Authorization': `Bearer ${token}`
},
credentials: 'same-origin',
}) .then(response => {
setLoadingListResSrch(false)
if (response.data.length === 0) {
setGoodListResSrch(response.data.result);
}
}) .catch(error => {
setLoadingListResSrch(false)
debugger;
if (axios.isCancel(error)) {
console.log("post Request canceled");
return;
} return;
});
}
}
我想当用户单击新按钮时取消先前的请求。
<FormGroup className="mb-2 ml-sm-2 mb-sm-2">
<div color="seccess" size="sm" className="btn btn-info m-3"
onClick={handleAbrotProductSearch}>
new search</div>
</FormGroup>
const handleAbrotProductSearch = useCallback(() => {
handleProductSearch());
}, [handleProductSearch]);
解决方案
如果您使用 axios,这可以通过使用取消令牌来完成:
axios.isCancel(thrown)
https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/
const source = axios.CancelToken.source();
axios.get('https://media.giphy.com/media/C6JQPEUsZUyVq/giphy.gif', {
cancelToken: source.token
}).catch(thrown => {
if (axios.isCancel(thrown)) {
console.log(thrown.message);
} else {
// handle error
}
});
// cancel the request (the message parameter is optional)
source.cancel('Request canceled.');
推荐阅读
- libgdx - 未显示按钮的文本工具提示。(LIBGDX)
- java - java eclipse中的NoSuchElementException问题
- sql - “无法绑定多部分标识符”带有连接的 SQL Server UPDATE 命令
- android - ConcurrentModificationException - 如何修复?
- java - CSS 在运行程序时不起作用,但在我不运行时它确实起作用
- tomcat - 具有受保护端点的 SPARQL SERVICE
- python - Python 列表说明:无法直接赋值
- arrays - matlab如何将字符串存储到数组中
- bash - 将循环中的参数附加到 CLI 命令
- python-3.x - 有效地绘制具有“最大多样性”的组合