Как отменить вызов api при нажатии кнопки в reactjs?

#reactjs

#reactjs

Вопрос:

я делаю запрос на сервер для загрузки данных, связанных с элементом, при нажатии кнопки элемента. Однако при нажатии кнопки «Отмена» запрос на загрузку данных должен быть прерван. Как я могу это сделать. Ниже приведен код,

 componentDidMount() {
    if(this.props.item) {
        this.load_item_data();
    }
}

load_item_data = () => {
    const props = this.props;
    this.file_download_status = {};
    if (this.on_item_changed) {
        this.on_item_changed();
    }
    const item_changed = new Promise((resolve) => { this.on_item_changed = 
    resolve; });
    const abort_loading = Promise.race([item_changed, this.unmount]);

    item
        .load(props.item.id, gl, this.update_download_progress, 
    abort_loading).then((result) => {
            this.files = result.files;
            this.setState({
                item_download_done: true,
            });
            client.add_item_view(props.item.id, abort_loading);
        });
  

Как я могу прервать приведенный выше запрос при нажатии кнопки отмены? Спасибо.

Комментарии:

1. Вы можете отменять запросы с помощью axios. И вы должны использовать какую-то платформу управления состоянием, такую как redux (и я рекомендую промежуточное программное обеспечение redux-saga) для решения подобных проблем.

Ответ №1:

Вот как это описано в документации Axios

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

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
  

Проверьте ссылку: —
https://github.com/axios/axios#cancellation

Комментарии:

1. Я считаю, что вы должны отклонить () обещание после source.cancel()