单击reactjs中的按钮时如何取消对api的调用？

Question

我向服务器发出请求，以在单击项目按钮时加载与项目相关的数据。但是，在单击“取消”按钮时，它应该中止加载数据的请求。我该怎么做。下面是代码，

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);
        });

如何在单击取消按钮时中止上述请求？谢谢。