在 api 调用完成之前更改路由会覆盖 vuex 存储

Question

我在我的 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);
  }
},

有没有办法防止这种情况发生？

Answer 1

如果您想防止 'last to finish' 异步调用覆盖状态，您需要取消所有旧操作，以免它们完成。

在您的示例中，由于您使用的是 axios，最简单的选择是使用 AbortController.

在您的操作中，通过 signal 参数将控制器附加到 axios 方法：

const controller = new AbortController()

let result = axios.get('/foo/bar', { signal: controller.signal })

然后当您需要取消它时（即在调用新操作之前，只需调用）：

controller.abort()

在 api 调用完成之前更改路由会覆盖 vuex 存储

Changing route before long api call finishes overwrites vuex store

vue.js

vuex

vue-router