如何解决通过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.');
,
使用HTTP发布方法是正确的,因为您是通过正文发送过滤器的。
,您可以取消和中止。
我已经给出了两种情况的例子。
取消:
as.glm()
对于中止:
const CancelToken = axios.CancelToken;
let cancelPost;
axios.post('/MyReallySlowReport',{
name: 'new name'
},{
cancelToken: new CancelToken(function executor(c) {
cancelPost = c;
})
})
// cancel the request
cancelPost();
//back end mvc c# example
public async Task<ActionResult> MyReallySlowReport(CancellationToken cancellationToken)
{
CancellationToken disconnectedToken = Response.ClientDisconnectedToken;
var source = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken,disconnectedToken);
List<ReportItem> items;
using (ApplicationDbContext context = new ApplicationDbContext())
{
items = await context.ReportItems.ToListAsync(source.Token);
}
return View(items);
}
,
是的,可以使用POST发送过滤器,并取消获取请求,如果您使用的是获取API,则只需使用AbortController
对象即可。
const controller = new AbortController();
fetch(url,{ signal: controller.signal })
.then(response => {
console.log(`Complete!`);
}).catch(e => {
console.error(`Error!: ${e.message}`);
});
// call abort to cancel the fetch request
const cancelRequest = () => {
controller.abort();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。