Отмена axios запроса в redux thunk?

Question

[Natebash]

Всем привет, есть запрос через axios на загрузку файла который крутится в redux thunk, который нужно прервать по кнопке Cancel с фронта.

export const uploadDataThunk = (uploadData: IUploadDataRequest) => {
  return async (dispatch: Dispatch<Action>, getState: () => RootState) => {
    try {
      await axiosInst.post(
        `api/${uploadData.id}/upload-data`,
        uploadData.formData,
      );

      dispatch(uploadPhotoAcceptedAC(fileName));
    } catch (e) {
      dispatch(uploadPhotoDeniedAC());
    }
  };
};

Вопрос, как правильно это сделать?

Comments

[Антон Горецкий]

Без своих попыток решения - смахивает на задание. Но я бы такой кейс стал делать на redux-saga.

Answer 1

[Natebash]

black1277 Да, все верно, у меня немного другая реализация получилась, у нас старый пакет axios который пока не можем поднять по собственным соображениям, поэтому сделал с помощью CancelToken
https://axios-http.com/docs/cancellation

Санка которая запускается на событие download

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

export const uploadThunk = (uploadData) => {
  return async (dispatch: Dispatch<Action>, getState: () => RootState) => {
    try {
      await axiosInst.post(
        `${upload_url}/${subjectId}/upload`,
        uploadData, {cancelToken: source.token}
      );

    } catch (e) {
      console.log("Failed upload", e);
    }
  };
};

Отменяем предыдущий запрос по клику кнопки на фронте

export const cancelUploadThunk = () => {
  return async (dispatch: Dispatch<Action>, getState: () => RootState) => {
    source.cancel("Operation canceled by the user.");
  };
};

Answer 2

[black1277]

Используйте AbortController для отмены запроса.
Вот здесь на русском https://learn.javascript.ru/fetch-abort рассказано как его применять к fetch (для понимания), а вот тут https://axios-http.com/docs/cancellation как его использовать для axios. Ну и в редаксе добавите нужный action.