我有一个反应应用程序,它在单击条目时显示数据列表和详细视图。我还有一个数据获取器,它每 5 秒从我的后端获取数据。
在我的详细视图中,我有一个删除按钮,它将删除后端的对象,然后返回到概览页面。删除后我想对对象列表进行即时刷新,所以我手动调用获取。
所以这有时会进入一个竞争条件,其中自动数据获取已经在进行中,手动开始并首先完成(因为自动获取更多数据),更新列表,以便不再显示已删除的列表,然后自动fetching 用旧数据覆盖它。
这通常是如何解决的?
我有一个反应应用程序,它在单击条目时显示数据列表和详细视图。我还有一个数据获取器,它每 5 秒从我的后端获取数据。
在我的详细视图中,我有一个删除按钮,它将删除后端的对象,然后返回到概览页面。删除后我想对对象列表进行即时刷新,所以我手动调用获取。
所以这有时会进入一个竞争条件,其中自动数据获取已经在进行中,手动开始并首先完成(因为自动获取更多数据),更新列表,以便不再显示已删除的列表,然后自动fetching 用旧数据覆盖它。
这通常是如何解决的?
据我了解您的情况,我认为如果发出后续请求,您想取消正在进行的服务器调用。Tod o 你可以使用axios.CancelToken
例如,
var axios = require("axios")
var CancelToken = axios.CancelToken;
var call1 = CancelToken.source();
var call2 = CancelToken.source();
axios.get('http://your/api/call', {
cancelToken: call1.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Ongoing server call is cancelled', thrown.message);
} else {
// handle error
}
});
setTimeout(function() {
// Cancel ongoing server call
call1.cancel('Stopping current server call');
// Server call on delete
axios.get('https://your/api/call', {
cancelToken: call2.token
}).then(function(response) {
console.log('Success', response.status);
});
}, 1000)
希望这会帮助你。