@lexstile

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

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

Например:
- сделали параллельно, ответа еще нет, два запроса - запрос А и запрос В (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,
});
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
kleinmaximus
@kleinmaximus
Senior Full-stack Javascript Developer
Создавайте 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;
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы