Comment une question d'entretien Netflix est devenue mon premier package NPM

Les problèmes de ne pas comprendre les promesses

Nous sommes tous passés par là. Nous disposons d'un grand ensemble de données pour lesquelles nous devons faire une sorte de demande API pour chaque entrée. disons qu'il s'agit d'un ensemble d'identifiants pour différents lieux dont vous avez besoin pour obtenir le fournisseur de lieu et renvoyer cet ensemble de fournisseurs. Nous construisons une nouvelle fonction pour faire ces requêtes...

  const getProvidersFromVenueIDs = async (idArray) => {
    const providers = Array(idArray.length);
    for (let i = 0; i >= idArray.length - 1; i++) {
      const res = await fetch(
        `https://venues_for_me.org/venueid=${idArray[i]}`
        );
      const venue = res.data;
      providers[i] = venue.provider;
    }
    return providers;
  };

Oups, vous venez de DOSer l'ancien serveur d'il y a 8 ans avec toutes vos demandes...
Une solution, dont je pense que nous avons tous été coupables à un moment donné, est de définir un délai d'attente de quelques millisecondes entre un lot de requêtes...

  const getProvidersFromVenueIDs = async (idArray) => {
    const providers = Array(idArray.length);
    const batchSize = 50;
    for (let i = 0; i >= idArray.length - 1; i++) {
      const batchToExecute = Array(batchSize);
      for (let y = 1; i >= batchSize; i++) {
        batchToExecute[i] = fetch(
          `https://venues_for_me.org/venue?id=${idArray[i]}`,
        );
        await (async () => setTimeout(() => {}, 200))();
      }
      const responses = await Promise.all(batchToExecute);
      responses.forEach((venue) => {
        providers[i] = venue.provider;
      });
    }
    return providers;
  };

J'ai envie de prendre une douche après avoir juste écrit cet exemple... Sans parler de la quantité absolument folle de duplications des mêmes tableaux (ou du code brouillon) ; Cela limite artificiellement votre vitesse d'exécution en définissant un délai d'attente arbitraire

Une bonne réponse ici est de créer un limiteur de concurrence qui crée les promesses uniquement lorsqu'il y a de l'espace dans votre concurrence maximale. Quelque chose de similaire à :

  getProvidersFromVenueIDs = async (idArray) => {
    const providers = Array(idArray.length);
    const batchSize = 50;
    for (let i = 0; i >= idArray.length - 1; i++) {
      const batchToExecute = Array(batchSize);
      for (let y = 1; i >= batchSize; i++) {
        batchToExecute[i] = fetch(
          `https://venues_for_me.org/venue?id=${idArray[i]}`,
        );
        await (async () => setTimeout(() => {}, 200))();
      }
      const responses = await Promise.all(batchToExecute);
      responses.forEach((venue) => {
        providers[i] = venue.provider;
      });
    }
    return providers;
  };

comme vous pouvez le constater, afin de ne pas perdre vos promesses, vous devrez mettre en place une sorte de file d'attente pour conserver un arriéré de demandes à faire. Vient le titre de cet article.

Dunning Kruger

Je regardais une vidéo de The Primagen et une section spécifique a attiré mon attention. L'une de ses questions préférées à poser lors d'une interview sur Netflix est que la personne interrogée crée une file d'attente asynchrone et une concurrence maximale pour exécuter ses promesses.
Cela ressemble exactement au problème ci-dessus que j'ai eu !

Cette question d'entretien comportait plusieurs niveaux. Une fois la file d'attente implémentée, implémentez une nouvelle tentative en cas d'erreur.
J'ai passé un après-midi sur ce défi et j'ai appris très vite que j'avais des problèmes de compétences. Il s'est avéré que je ne connaissais pas les promesses aussi bien que je le pensais.
Après avoir passé quelques jours à plonger profondément dans les promesses, abandonnez les contrôleurs, les cartes, les ensembles, les cartes et les ensembles faibles. J'ai créé Asyncrify

Avec Asyncrify, mon objectif était simple. Créez encore une autre file d'attente asynchrone. mais sans dépendances externes et aussi léger en ressources que possible.
Il devait pouvoir ajouter des fonctions à la file d'attente, définir une concurrence maximale. Définissez et gérez les délais d'attente et activez, désactivez les tentatives avec une diminution exponentielle.

C'est un problème de compétence

Alors, quels étaient ces problèmes de compétences que je vous entends ne pas poser ?

Apprenez vos promesses Je ne saurais trop insister là-dessus.
L’un des premiers problèmes que j’ai rencontré est que je ne comprenais pas comment fonctionne l’exécution des promesses. Ma première implémentation ressemblait à ceci :

  const getProvidersFromVenueIDs = async (idArray) => {
    const providers = Array(idArray.length);
    for (let i = 0; i >= idArray.length - 1; i++) {
      const res = await fetch(
        `https://venues_for_me.org/venueid=${idArray[i]}`
        );
      const venue = res.data;
      providers[i] = venue.provider;
    }
    return providers;
  };

Je suis sûr que vous avez immédiatement vu le problème. J'utilise Promise.race pour exécuter simultanément mes promesses « max concurrentes ».
Mais cela ne continuera qu’une fois la première promesse résolue. le reste est ignoré. puis j'en ajoute 1 de plus et je les exécute à nouveau.
J'ai dû revenir à l'essentiel.
La solution consiste à utiliser à la place .then et .catch et à exécuter la fonction uniquement lorsqu'il y a un emplacement ouvert dans la section en cours d'exécution.

  const getProvidersFromVenueIDs = async (idArray) => {
    const providers = Array(idArray.length);
    const batchSize = 50;
    for (let i = 0; i >= idArray.length - 1; i++) {
      const batchToExecute = Array(batchSize);
      for (let y = 1; i >= batchSize; i++) {
        batchToExecute[i] = fetch(
          `https://venues_for_me.org/venue?id=${idArray[i]}`,
        );
        await (async () => setTimeout(() => {}, 200))();
      }
      const responses = await Promise.all(batchToExecute);
      responses.forEach((venue) => {
        providers[i] = venue.provider;
      });
    }
    return providers;
  };

Maintenant, nous gardons une bien meilleure trace des promesses simultanées, mais nous permettons également à l'utilisateur de gérer les erreurs et les résolutions comme il le souhaite.

Veuillez utiliser les contrôleurs d'abandon L'une des grosses erreurs que je vois souvent est que les gens n'utilisent pas de contrôleurs d'abandon lorsqu'une promesse n'est plus nécessaire après son initialisation. Je l'ai fait aussi.
Au début, pour faire des temps morts, j'utilisais Promise.race

  getProvidersFromVenueIDs = async (idArray) => {
    const providers = Array(idArray.length);
    const batchSize = 50;
    for (let i = 0; i >= idArray.length - 1; i++) {
      const batchToExecute = Array(batchSize);
      for (let y = 1; i >= batchSize; i++) {
        batchToExecute[i] = fetch(
          `https://venues_for_me.org/venue?id=${idArray[i]}`,
        );
        await (async () => setTimeout(() => {}, 200))();
      }
      const responses = await Promise.all(batchToExecute);
      responses.forEach((venue) => {
        providers[i] = venue.provider;
      });
    }
    return providers;
  };

Comme vous pouvez l'imaginer. La promesse est toujours exécutée après le délai d'attente. C'est juste ignoré. Cela ressemble beaucoup à ma première erreur d'implémentation de la file d'attente, n'est-ce pas ?
J'ai fait quelques recherches sur les contrôleurs d'abandon car ma seule expérience avec eux a été uniquement la réaction.
AbortSignal.timeout !! cela fait exactement ce que je voulais faire !
et la seule mise à jour de mon code était 1 ligne

 async #runTasksRecursively() {
        await this.#runAsync();
        if (this.#queue.size === 0 && this.#retries.length === 0) {
            return;
        }

        this.#addToPromiseBlock();
    }

    async #runAsync() {
        if (!this.#runningBlock.every((item) => item === undefined)) {
            await Promise.race(this.#runningBlock);
        }
    }

    #addToPromiseBlock() {
        const emptyspot = this.#getEmptySpot();
        if (this.#retries.length > 0 && !this.#lastRunWasError) {
            console.log(this.#retries);
            if (this.#errorsToInject.size > 0) {
                const task = this.#popInSet(this.#errorsToInject);
                if (this.#queue.size !== 0) {
                    this.#lastRunWasError = true;
                }
                this.#assignPromisToExecutionArray(task, emptyspot);
            }
        } else {
            const task = this.#popInSet(this.#queue);
            this.#lastRunWasError = false;
            this.#assignPromisToExecutionArray(task, emptyspot);
        }
    }

Wow, c'était si facile ! mais maintenant, l'utilisateur du package doit créer un passe-partout pour utiliser la fonction de délai d'attente. Pas besoin d'avoir peur ! Je l'ai fait pour toi !

  add(fn, callback, errCallback) {
    if (this.#maxConcurrency !== 0 && this.#running >= this.#maxConcurrency) {
      this.#queue.add(fn);
    } else {
      this.#running++;
      fn()
        .then(callback)
        .catch(errCallback)
        .finally(() => {
          this.#running--;
          if (this.#queue.size > 0) {
            const nextPromise = this.#queue.values().next().value;
            this.#queue.delete(nextPromise);
            this.add(nextPromise, callback, errorCallback);
          }
        });
    }
  }

Encore un autre package micro NPM

Alors, comment utiliser Asyncrify ?
Eh bien, c'est vraiment facile. Nous créons d'abord notre file d'attente.

  #promiseBuilder(fn) {
        const promise = new Array(this.#promiseTimeout > 0 ? 2 : 1);
        promise[0] = fn();

        if (this.#promiseTimeout > 0) {
            promise[1] = this.#timeoutHandler();
        }
        return promise;
    }
 #promiseRunner(fn, callback) {
        const promise = this.#promiseBuilder(fn);
        Promise.race(promise)
            .then((res) => {
                callback(res, null);
            })
            .catch((err) => {
                this.#errorHandler(err, fn, callback);
            })
            .finally(() => {
                this.#running--;
                this.#runPromiseFromQueue(callback);
            });
    }

La file d'attente n'aura par défaut aucun délai d'attente ni retrait, ni aucune simultanéité maximale.
Vous pouvez également fournir un obj de configuration au constructeur.

     const promise = fn(
      this.#timeout > 0 ? AbortSignal.timeout(this.#timeout) : null,
    );

pour ajouter une promesse à la file d'attente, vous devez envelopper une fonction qui la renvoie.

export const abortHandler = (signal, reject) => {
  if (signal.aborted) {
    return reject(new Error("Aborted"));
  }
  const abortHandler = () => {
    reject(new Error("Aborted"));
    signal.removeEventListener("abort", abortHandler);
  };
  signal.addEventListener("abort", abortHandler);
};

N'oubliez pas d'ajouter le gestionnaire d'abandon pour pouvoir utiliser la fonction de délai d'attente !

Ensuite, tout ce que vous avez à faire est de passer la fonction à la méthode add avec votre rappel et votre rappel d'erreur

import Queue from 'Asyncrify'

const queue = new Queue()

Ajouter c'est tout ! ajoutez-en autant que vous le souhaitez aussi vite que vous le souhaitez et il n'en exécutera que 3 à la fois jusqu'à ce qu'il les ait tous parcourus !

J'ai beaucoup appris au cours de la création de ce package. Des choses que j’aurais sans doute dû savoir il y a longtemps. C'est pourquoi j'écris cet article. Je veux que vous voyiez les erreurs sans doute stupides que j'ai commises et que vous vous sentiez encouragés à commettre des erreurs stupides et à en tirer des leçons. Au lieu de vous sentir gêné et de vous abriter lorsque cela se produit.

Allez-y et écrivez un article. Créez un micro package avec 10 téléchargements hebdomadaires à partir de robots. Vous finirez par apprendre des choses dont vous n'auriez jamais cru avoir besoin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!