Как написать универсальный метод на axios, который бы умел отменять предыдущие незавершенные запросы, но не все?

Question

[lexstile]

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

Например:
- сделали параллельно, ответа еще нет, два запроса - запрос А и запрос В (http.get, http.post)
- далее вызвали снова метод А
=> в этом случае должен отмениться только запрос А, запрос B должен продолжать работать

EnrollmentPanel.jsx

useEffect(() => {
    const asyncEnrollment = async () => {
      const data = { userId, filter };
      await initialEnrollment(dispatch, data);
    };

    asyncEnrollment();
  }, [dispatch, userId, filter]);

initialEnrollment.js

export const initialEnrollment = async (dispatch, data = null) => {
  try {
    const callEnrollmentResult = await callEnrollment(data)
      .then((response) => get(response, 'data', null))
      .catch((error) => {
        const status = get(error, 'response.status', 1000);
        throwError(status);
      });

    console.log('callEnrollmentResult', callEnrollmentResult);
  } catch (error) {
    dispatch(
      setError({
        code: get(error, 'code', null),
        message: get(error, 'message', null),
      })
    );
  }
};

callEnrollment.js

export const callEnrollment = ({ userId, filter }) =>
  http.post(`${API_URL}.${METHODS.CALL_ENROLLMENT}`, { userId, filter }).then((response) => {
    console.log(METHODS.CALL_ENROLLMENT, response);
    return response;
  });

http.js

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

export const http = axios.create({
  headers: {
    Authorization: `Bearer ${LOCATION_HREF}`,
  },
  cancelToken: source.token,
});

Answer 1

[Klein Maximus]

Создавайте cancelToken для конкретного запроса (cancelToken.source()), передавайте его в каждый запрос и отслеживайте, завершился ли сам запрос. Если нет, то отменяйте.

https://github.com/axios/axios#cancellation

const cancelToken = axios.CancelToken;

const usePost = () => {
  const source = useRef(null);

  return () => {
    if (source.current) {
      source.current.cancel();
    }

    source.current = cancelToken.source();
    const result = http.post(`${API_URL}.${METHODS.CALL_ENROLLMENT}`, { cancelToken, userId, filter });

    // ........

    result.finally(() => {
      // Обнуляем токен при завершении запроса
      source.current = null;
   });

    return result;
  }
}