javascript - ¿Desactivar rebotes de un término de búsqueda al usar la nueva API de Angular Resource?

Con RxJS podríamos diferir la activación de pulsaciones de teclas de esta manera antes de realizar una solicitud HTTP.

this.query$.pipe(
    debounceTime(500),
    distinctUntilChanged(),

¿Tiene la nueva API de recursos de Angular una manera de aplicar debounce a un campo de entrada antes de actualizar los parámetros de la solicitud?

Respuesta #1

En el futuro previsible no hay planes de añadir rebote al propio recurso.

Este tema ha sido discutido en este GH Issue.

La solución más sencilla para agregar un poco de debounce a un resource sería "esperar" en el loader.

export class AppComponent {
  inputText = signal('text');

  resource = resource({
    request: this.inputText,
    loader: async (param) => {
  
      // Debouncing: 300 ms
      await wait(300, param.abortSignal);
  
      return await Promise.resolve(Math.random())
    },
  });  

  ResourceStatus = ResourceStatus;
}

Con la función de espera que podría implementarse de esta manera:

function wait(ms: number, signal: AbortSignal) {
  return new Promise<void>((resolve, reject) => {
    const timeout = setTimeout(() => resolve(), ms);

    signal.addEventListener('abort', () => {
      clearTimeout(timeout);
      reject(new Error('Operation aborted'));
    }, { once: true });
  });
}

Esta solución es un poco conveniente porque mantiene el recurso en el estado Loading, lo cual coincide con el comportamiento esperado por los usuarios: cuando escribo quiero que la aplicación 'busque'.