Cancelar un fetch

AbortController ofrece una nueva forma de cancelar los fetches que ya no se consideran relevantes. Esto se puede conectar a fetch mediante el segundo parámetro RequestInit.

Resource

La integración es sencilla con RestEndpoint mediante el miembro signal:

const abort = new AbortController();
const AbortableArticle = CoolerArticleResource.get.extend({
  signal: abort.signal,
});
// ...somewhere later trigger cancellation
abort.abort();

Endpoint

Además, se puede agregar fácilmente una funcionalidad similar a cualquier endpoint usando miembros personalizados.

type Params = { id: string };

const UserDetail = new Endpoint(
  function ({ id }: Params) {
    const init: RequestInit = {};
    if (this.signal) {
      init.signal = this.signal;
    }
    return fetch(this.url({ id }), init).then(res => res.json()) as Promise<
      typeof payload
    >;
  },
  {
    url({ id }: Params) { return `/users/${id}` },
    signal: undefined as AbortSignal | undefined,
  },
);

const abort = new AbortController();
const AbortableUserDetail = UserDetail.extend({
  signal: abort.signal,
});
// ...somewhere later trigger cancellation
abort.abort();