Abortable fetch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<button class="js-trigger">Start Fetching</button>
<button class="js-abort">Abort</button>

<div></div>

Babel + JSX

let controller;

const $trigger = document.querySelector('.js-trigger');
const $abort = document.querySelector('.js-abort');
const $result = document.querySelector('div');

async function getData() {
 		controller = new AbortController();
		const signal = controller.signal;
    controller.abort();
		$result.innerText = 'Loading';
    $abort.style.display = 'inline-block';
    try {
    	var response = await fetch('https://reqres.in/api/users', { signal });
    	$result.innerText = JSON.stringify(await response.json());
    	$abort.style.display = 'none';
      
    } catch (error) {
    	if (error.name === 'AbortError') {
      	$result.innerText = 'Aborted';
        return;
    	}
      
      console.log(error);
    }
}

$trigger.addEventListener('click', () => getData());
$abort.addEventListener('click', () => controller.abort());