Блог

Главная - Вопросы по программированию - Как отменить все ненужные запросы в vuex, axios

Как отменить все ненужные запросы в vuex, axios

#vue.js #axios #vuex #cancellation

Вопрос:

У меня есть ситуация: когда я живу на странице, асинхронные функции в mounted hook продолжают работать (например 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();
}

Есть какие-нибудь идеи?

Комментарии:

1.Основываясь на документации, похоже, что для каждого запроса создается новый токен. Возможно, вам нужно использовать Вы также можете создать токен отмены, передав функцию исполнителя CancelToken axios-http.com/docs/cancellation

2. @Patfreeze при подобных действиях — также отменяется только первый запрос

3. Мы видим только один запрос в вашем посте, который нужно добавить config к каждому запросу. Попробуйте сделать свои запросы на одной странице без использования vuex и посмотрите, будет ли отменена только первая.

4. Я понял причину: он отменяет запросы, уже добавленные в стек запросов, но у меня есть ожидание в смонтированном, так что некоторые запросы вызываются после того, как другие заполнены. И эти запросы не отменяются

5. Хорошо, если вы нашли решение, ОПУБЛИКУЙТЕ его здесь в качестве ответа.

Ответ №1:

Дело в том, что 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;
},
Метки: ,