JSFiddle - React, Tailwind, and code Playground

by Dmitriy Mozgoviy

HTML

<script src="https://unpkg.com/c-promise2"></script>
<p>Make request to endpoint with 10s+ latency</p>
<p>Open your console to see the log</p>
<p>Note that the related request does abort when you undo the promise chain (see the network tab in developer tools)</p>
<button onclick="request(0)">Request url</button>
<button onclick="request(5000)">Request url with 5s timeout</button>
<button onclick="abort()">Abort</button>

JavaScript

let fetchChain;
    const url = "https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=10s";
    let timestamp= Date.now();
    const log= (message, ...values)=> console.log(`[${Date.now()-timestamp}ms] ${message}`, ...values);
    const updateTimeStamp= ()=> (timestamp= Date.now());



    function fetchWithTimeout(url, {timeout, ...fetchOptions}= {}) {
        return new CPromise((resolve, reject, {signal}) => {
            fetch(url, {...fetchOptions, signal}).then(resolve, reject)
        }, timeout)
    }

    function request(timeout) {
        abort();
        updateTimeStamp();
        log('Fetch started');
        fetchChain = fetchWithTimeout(url, {timeout})
            .then(response => response.json())
            .then(data => {
                 log(`Done: `, data);
                 alert(`Done: ${JSON.stringify(data)}`)
             }, err => {
                 log('Error:', err);
                 alert(`Error: ${err}`);
             });
    }

    function abort() {
        fetchChain && fetchChain.cancel();
    }