Как отменить предыдущий запрос топора ios?

Question

Как я могу отменить предыдущий запрос ax ios в React / Redux при создании нового запроса?

Вот один из вариантов, который я нашел в Google, но он не работает.

действие. js

class FilmsActions {
  getFilmList(searchParams = undefined, cancelToken = null) {
    return async dispatch => {
      dispatch(filmsFetchRequest());
      try {
        const res = await api.get(`/films/${searchParams && searchParams}`, {
          cancelToken,
        });
        return setTimeout(() => dispatch(filmsFetchSuccess(res.data)), 1000);
      } catch (err) {
        return setTimeout(() => dispatch(filmsFetchError(err)), 1000);
      }
    }
  }
}

export const filmsActions = new FilmsActions();

приложение. js

import axios from 'axios';

class BrowseFilms extends Component {
  ...

  componentDidUpdate(prevProps) {    
    const {
      getFilmList,
      location,
      loading,
    } = this.props;

    if (prevProps.location.search !== location.search) {    
      if (loading) {
        this.source.cancel();
      }

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

      getFilmList(location.search, this.source.token);
    }
  }

  ...
}

const mapStateToProps = state => ({
  data: state.films.data,
  loading: state.films.loading,
});

const mapDispatchToProps = dispatch => ({
  getFilmList: (searchParams, cancelToken) => dispatch(filmsActions.getFilmList(searchParams, cancelToken)),
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(BrowseFilms));

В этом случае это не отменяет запрос. Если вы поменяете местами (в componentDidUpdate) if (loading) и this.source, то он отменит запрос, но следующий запрос, а не предыдущий запрос.

Answer 1

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

Чтобы избежать этого, необходимо изменить действие. js.

действие. js

const delay = ms => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

class FilmsActions {
  getList(searchParams = undefined, cancelToken = null) {
    return async dispatch => {
      dispatch(filmsFetchRequest());
      try {
        await delay(1000);
        const res = await api.get(`/films/${searchParams && searchParams}`, {
          cancelToken,
        });
        return dispatch(filmsFetchSuccess(res.data));
      } catch (err) {
        if (!axios.isCancel(err)) {
          return dispatch(filmsFetchError(err));
        }
      }
    }
  }
}

export const filmsActions = new FilmsActions();