Почему не отменяются запросы на сервер (axios)?

JavaScript React TypeScript

1 ответ

Есть проект на React с таким концептом: при зуме графика отправлять запросы на сервер, который возвращает данные, необходимые для отображения.

Теперь встала задача сделать эти запросы отменяемыми, то есть при отправке новых запросов, если уже есть запросы, отправленные ранее, но не вернувшиеся на клиент, их нужно отменять. Решил использовать axios (v1.5.5) и AbortController. Проблема в том, что запросы не отменяются и возвращаются как и раньше. Вот часть кода компонента:

const controllerTempsRef = useRef&lt;AbortController | null&gt;(null); const controllerPressuresRef = useRef&lt;AbortController | null&gt;(null);  const handleChartZoom = useCallback(         async (e: any) =&gt; {             controllerTempsRef.current?.abort();             controllerPressuresRef.current?.abort();              controllerTempsRef.current = new AbortController();             controllerPressuresRef.current = new AbortController();              const resTemps = await axios.post('/api/files/datas', {                 fileNames: temps.map((temp) =&gt; temp.name),                 layer: degree,                 domain: { low: zoomDomain[0], high: zoomDomain[1] },                 signal: controllerTempsRef.current?.signal,             });              const resPressures = await axios.post('/api/files/datas', {                 fileNames: pressures.map((pressure) =&gt; pressure.name),                 layer: degree,                 domain: { low: zoomDomain[0], high: zoomDomain[1] },                 signal: controllerPressuresRef.current?.signal,             }); }, []);

(Функция handleChartZoom вызывается в другом компоненте)

В чем может быть проблема?

Заранее всем спасибо!

Дополнительно:

не правильно передаешь signal, это ведь свойство config, а не data

const resTemps = await axios.post(         '/api/files/datas',         {           fileNames: temps.map((temp) =&gt; temp.name),           layer: degree,           domain: { low: zoomDomain[0], high: zoomDomain[1] },         },         {           signal: controllerTempsRef.current.signal,         }       );        const resPressures = await axios.post(         '/api/files/datas',         {           fileNames: pressures.map((pressure) =&gt; pressure.name),           layer: degree,           domain: { low: zoomDomain[0], high: zoomDomain[1] },         },         {           signal: controllerPressuresRef.current.signal,         }       );

const resTemps = await axios.post( '/api/files/datas', { fileNames: temps.map((temp) => temp.name), layer: degree, domain: { low: zoomDomain[0], high: zoomDomain[1] }, }, { signal: controllerTempsRef.current.signal, } ); const resPressures = await axios.post( '/api/files/datas', { fileNames: pressures.map((pressure) => pressure.name), layer: degree, domain: { low: zoomDomain[0], high: zoomDomain[1] }, }, { signal: controllerPressuresRef.current.signal, } );

спасибо огромное

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Дмитрий К. Ответ

Проблема с отменой запросов на сервер с использованием Axios может возникать по нескольким причинам. Одной из возможных причин может быть неправильное использование методов отмены запросов или неверная настройка интерсепторов.

Для начала, давайте разберем, как правильно отменять запросы на сервер с помощью Axios. Для этого необходимо создать экземпляр CancelToken и передать его в параметры запроса. Затем, если запрос нужно отменить, вызываем метод cancel у объекта CancelToken.

Пример кода на JavaScript с использованием Axios для отмены запроса:

// Создаем экземпляр CancelToken
const source = axios.CancelToken.source();
 
// Выполняем запрос с передачей CancelToken в параметры
axios.get('/api/data', {
  cancelToken: source.token
})
.then(response =&gt; {
  // Обработка данных
})
.catch(error =&gt; {
  if (axios.isCancel(error)) {
    console.log('Запрос был отменен', error.message);
  } else {
    console.log('Произошла ошибка', error.message);
  }
});
 
// Отменяем запрос
source.cancel('Запрос был отменен пользователем');

// Создаем экземпляр CancelToken const source = axios.CancelToken.source(); // Выполняем запрос с передачей CancelToken в параметры axios.get('/api/data', { cancelToken: source.token }) .then(response => { // Обработка данных }) .catch(error => { if (axios.isCancel(error)) { console.log('Запрос был отменен', error.message); } else { console.log('Произошла ошибка', error.message); } }); // Отменяем запрос source.cancel('Запрос был отменен пользователем');

Теперь давайте рассмотрим возможные причины, по которым запросы на сервер не отменяются. Одной из причин может быть неправильное использование метода cancel или его вызов в неподходящем месте. Также, возможно, что ваш интерсептор не правильно обрабатывает отмену запроса.

Если у вас есть интерсепторы в вашем приложении, убедитесь, что они правильно обрабатывают отмену запроса. Например, вы можете добавить следующий код в ваш интерсептор для обработки отмены запроса:

axios.interceptors.request.use(function (config) {
  // Проверяем, был ли запрос отменен
  if (axios.isCancel(config)) {
    return Promise.reject(new Error('Запрос был отменен'));
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.request.use(function (config) { // Проверяем, был ли запрос отменен if (axios.isCancel(config)) { return Promise.reject(new Error('Запрос был отменен')); } return config; }, function (error) { return Promise.reject(error); });

Таким образом, для успешной отмены запросов на сервер с использованием Axios необходимо правильно использовать методы отмены, передавать CancelToken в параметры запроса и корректно обрабатывать отмену запроса в интерсепторах. Проверьте ваш код и убедитесь, что он соответствует этим требованиям. Если проблема сохраняется, попробуйте упростить код и пошагово проверить каждый шаг выполнения запроса.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов

Почему не отменяются запросы на сервер (axios)?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно