Как отменить все axios запросы при переходе на другой компонент (страницу)?

Рейтинг: 1Ответов: 1Опубликовано: 10.02.2023

у меня есть данный код, который циклом запрашивает фотографии в base64 с сервера по названиям, (которые я аналогично получил ранее) для слайдера фотографий на странице проекта:

const fetchPhoto = async () => {
        for (let i = 0; i < project.photo.length; i++) {
            const image = {
                title: project.name,
                name: project.photo[i],
            }
            axios.get(`/image/${image.title}/${image.name}`).then(async ({data}) => {
                photoBase64[i] = data;
                setPhotoBase64({...photoBase64});
            });
        }
    }
    fetchPhoto();

Если у пользователя будет низкая интернет-скорость, и он откроет какой-то проект (откроет компонент "проект"), закроет его (перейдет в компонент "все проекты") и откроет другой, то ему придется ждать, пока загрузятся фотографии прошлого проекта, потом начнется загрузка для текущего проекта. Как мне отменить запросы, если я перехожу из компонента "проект" в какой-либо другой ?

javascript reactjs node.js axios
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Как мне отменить запросы, если я перехожу из компонента "проект" в какой-либо другой ?

Начиная с версии v0.22.0 Axios поддерживает AbortController для отмены запросов через fetch API:

// объявляем контроллер
const controller = new AbortController();

axios.get('/foo/bar', {
   // устанавливаем связь с контроллером
   signal: controller.signal
}).then(function(response) {
   //...
});
// отмена запроса
controller.abort()

Более подробнее в этой статье https://axios-http.com/ru/docs/cancellation