Abort Controller Polyfill Example

abort-example.js

import React, { Component } from 'react';
import './Fetch.css';
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';

const AbortController = window.AbortController;
const controller = new AbortController();
const signal = controller.signal;

class Fetch extends Component {

    constructor(props) {
        super(props);
        this.state = {
            results: null,
            status: null
        }
    }

    handleRun = () => {
        fetch('https://jsonplaceholder.typicode.com/photos', { signal })
            .then((resp) => resp.json())
            .then((data) => {
                console.log("fetched");
                this.setState({
                    results: JSON.stringify(data),
                    status: 'completed'
                });
            })
            .catch((e) => {
                console.log(e.message);
            });
    }

    handleAbort = () => {
        controller.abort();
        console.log("aborting...");
        this.setState({
            status: 'aborted'
        });
    }

    render() {

      return (
            <div>
                <h1>Fetch example</h1>
                <div>Results: {this.state.results}</div>
                <div>Status: {this.state.status}</div>
                <br/>
                <br/>
                <button onClick={() => this.handleRun()}>Run</button>
                <button onClick={() => this.handleAbort()}>Abort</button>

            </div>
          );
    }
    
}



export default Fetch;