vuex, axios에서 불필요한 요청을 모두 취소하는 방법

vuex, axios에서 불필요한 요청을 모두 취소하는 방법

문제가 있다: 페이지를 실행하면 비동기 기능이mounted훅이 계속 기능한다(예를 들어)await this.getUser({id: 1}))를 사용하려고 합니다.axios.CancelToken단, 유감스럽게도 첫 번째 요구만 취소됩니다(모든 요구는 아닙니다).요청 전송 기능:

const source = axios.CancelToken.source();
const config = {
    headers: {
        authorization: `${prefix}${localStorage.getItem('authorization')}`
    },
    cancelToken: source.token
};
store.commit('SET_CANCEL_SOURCE', source);

const response = await axios.get(url, config);

돌연변이 저장:

SET_CANCEL_SOURCE: (state, cancel: CancelTokenSource) => {
    state.cancelTokens.push(cancel);
},
RESET_CANCEL_TOKENS: (state) => {
    if (state.cancelTokens.length) {
        state.cancelTokens.map((item: any, index: number) => {
            console.log(index, item);
            item.cancel();
        });
        state.cancelTokens = [];
    }
}

저장 작업:

clearToken ({commit}) {
    commit('RESET_CANCEL_TOKENS');
}

컴포넌트의 마운트 해제 전:

beforeUnmount() {
    this.clearToken();
}

좋은 생각 있어요?

요점은 말이다CancelToken는 이미 전송된 요청만 취소합니다.내가 찾은 가장 좋은 해결책은 정보를 로드하는 단계를 만들고, 변수를 만드는 것이다. 현재 단계를 나타내는 변수와beforeUnmount가변화하다isCancelled = true다음 단계가 배출되지 않도록 합니다.예:

data: () => ({
    stage: 0,
    isCancelled: false,
}),
async setInitialData() {
    if (this.stage >= 4 || this.isCancelled) {
        return;
    }

    switch (this.stage) {
        case 0:
            await action1();
            break;

        case 1:
            await action2();
            break;

        case 2:
            await action3();
            break;

        case 3:
            await action2();
            break;

        default:
            break;
    }

    this.stage++;
    await this.setInitialData();
},
async mounted() {
    await this.setInitialData();
},
beforeUnmount() {
    this.isCancelled = true;
},

언급URL : https://stackoverflow.com/questions/69273033/how-to-cancel-all-unneccesary-requests-in-vuex-axios