En este momento tengo un código que es básicamente:

 var loadingIndicator = /* Reference to UI component */, output = /* Reference to UI component */, abortController; function onThingRequested(thing) { abortController?.abort(); requestThing(thing); } async function requestThing(thing) { abortController = new AbortController(); output.innerText = ''; loadingIndicator.show(); try { console.log(`STARTING ${thing}`); // For the sake of brevity of the example, assume `thing` is safe to put here. var thingRes = await fetch(`/example?thing=${thing}`, { signal: abortController.signal }); output.innerText = await thingRes.text(); } catch (err) { console.log(`ERRORED ${thing}`); output.innerText = err; } finally { console.log(`FINALLY'D ${thing}`); loadingIndicator.hide(); } }

Si onThingRequested('thing1') y luego, antes de que se cargue, active onThingRequested('thing2') , el resultado es, por supuesto...

 STARTED thing1 STARTED thing2 ERRORED thing1 FINALLY'D thing1 FINALLY'D thing2

... porque requestThing activa la nueva recuperación de inmediato, mientras que la cancelación ocurre de forma asíncrona. ¿Hay alguna manera elegante de esperar a que la búsqueda anterior termine de abortar antes de continuar? Además, por supuesto, de la solución alternativa de...

 function onThingRequested(thing) { abortController?.abort(); setTimeout(() => requestThing(thing), 1); }