롱 API 호출이 완료되기 전에 경로를 변경하면 vuex 저장소를 덮어씁니다.

롱 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);
  }
},

이런 일이 일어나지 않도록 하는 방법이 있나요?

'마지막 종료' 비동기 호출이 상태를 덮어쓰지 않도록 하려면 오래된 액션을 모두 취소하여 완료하지 않도록 해야 합니다.

이 예에서는 를 사용하고 있기 때문에axios, 가장 쉬운 옵션은,AbortController.

액션으로 컨트롤러를axios경유 메서드signal파라미터:

const controller = new AbortController()

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

취소가 필요한 경우(즉, 새로운 액션을 호출하기 전에 전화하기만 하면 됩니다)

controller.abort()

언급URL : https://stackoverflow.com/questions/71765903/changing-route-before-long-api-call-finishes-overwrites-vuex-store