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

Question

[Артем Борисов]

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

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

const controllerTempsRef = useRef<AbortController | null>(null);
const controllerPressuresRef = useRef<AbortController | null>(null);

const handleChartZoom = useCallback(
        async (e: any) => {
            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) => 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,
            });
}, []);

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

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

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

Answer 1

[Артем]

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

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

Comments

[Артем Борисов]

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