在长时间 api 调用完成之前更改路由会覆盖 vuex 存储
我的 vuex 存储中有一个很长的 api 调用，如果我在完成之前更改路线并使用更快的 api 调用从另一个页面分派相同的操作，则第一个调用最终将覆盖第二个调用。该操作如下所示：
async getData({ commit }, payload) {
try {
const params = {...};
const res = await axios.get(`/data`, {
params,
});
if (res.status === 200) {
commit("setData", res.data);
}
} catch (error) {
commit("setError", error.response);
}
},
有没有办法防止这种情况发生？
I have a long api call in my vuex store and if I change the route before it's finished and dispatch the same action from another page with a quicker api call the first call will eventually overwrite the second call. The action looks like this:
async getData({ commit }, payload) {
try {
const params = {...};
const res = await axios.get(`/data`, {
params,
});
if (res.status === 200) {
commit("setData", res.data);
}
} catch (error) {
commit("setError", error.response);
}
},
Is there a way to prevent this from happening?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果要防止“最后完成”异步调用覆盖状态，则需要取消任何旧操作，以免完成。
在您的示例中，由于您使用的是
Axios，因此最简单的选择是使用abortController。在您的操作中，通过
signal> signalparam将控制器连接到Axios方法：然后，当您需要取消它（即在调用新操作之前，只需调用）：
If you want to prevent the 'last to finish' async call from overwriting the state, you need to cancel any old actions so they don't complete.
In your example, since you are using
axios, the easiest option is to use anAbortController.In your action, attach the controller to the
axiosmethod via thesignalparam:Then when you need to cancel it (i.e before calling a new action, simply call):