Wie aus einer Netflix-Interviewfrage mein erstes NPM-Paket wurde

Die Probleme, Versprechen nicht zu verstehen

Wir waren alle dort. Wir haben einen großen Datensatz, bei dem wir für jeden Eintrag eine Art API-Anfrage stellen müssen. Nehmen wir an, es handelt sich um eine Reihe von IDs für verschiedene Veranstaltungsorte, von denen Sie den Veranstaltungsortanbieter erhalten und diese Reihe von Anbietern zurückgeben müssen. Wir erstellen eine neue Funktion, um diese Anfragen zu stellen...

  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;
  };

Ups, du hast gerade den alten Server von vor 8 Jahren mit all deinen Anfragen DOSed gemacht...
Eine Lösung, an der wir uns meiner Meinung nach alle schon einmal schuldig gemacht haben, besteht darin, zwischen mehreren Anfragen eine Zeitüberschreitung von einigen Millisekunden festzulegen ...

  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;
  };

Ich möchte duschen, nachdem ich gerade dieses Beispiel geschrieben habe ... Ganz zu schweigen von der absolut verrückten Menge an Duplikaten derselben Arrays (oder dem chaotischen Code); Dadurch wird Ihre Ausführungsgeschwindigkeit künstlich eingeschränkt, indem ein willkürliches Timeout festgelegt wird

Eine gute Antwort hier ist die Erstellung eines Parallelitätsbegrenzers, der die Versprechen nur dann erstellt, wenn in Ihrer maximalen Parallelität Platz ist. Etwas Ähnliches wie:

  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;
  };

Wie Sie sehen, müssen Sie, um keine Versprechen zu verlieren, eine Art Warteschlange implementieren, um einen Rückstand an zu stellenden Anfragen aufrechtzuerhalten. Hier kommt der Titel dieses Artikels.

Mahnender Krüger

Ich habe mir ein Video von The Primagen angesehen und ein bestimmter Abschnitt ist mir aufgefallen. Eine seiner Lieblingsfragen in einem Netflix-Interview ist, dass der Interviewpartner eine asynchrone Warteschlange und eine maximale Parallelität erstellen soll, um Versprechen auszuführen.
Das klingt genau nach dem oben genannten Problem, das ich hatte!

Diese Interviewfrage hatte mehrere Ebenen. Nachdem die Warteschlange implementiert wurde, implementieren Sie einen Wiederholungsversuch bei Fehlern.
Ich habe einen Nachmittag mit dieser Herausforderung verbracht und sehr schnell festgestellt, dass ich Probleme mit meinen Fähigkeiten habe. Es stellte sich heraus, dass ich Versprechen nicht so gut kannte, wie ich dachte.
Nachdem ich ein paar Tage damit verbracht habe, mich intensiv mit Versprechen, Abbruch-Controllern, Karten, Sets, schwachen Karten und Sets zu beschäftigen. Ich habe Asyncrify

Mit Asyncrify war mein Ziel einfach. Erstellen Sie noch eine weitere asynchrone Warteschlange. aber ohne externe Abhängigkeiten und so ressourcenschonend wie möglich.
Es musste in der Lage sein, Funktionen zur Warteschlange hinzuzufügen und eine maximale Parallelität festzulegen. Legen Sie Zeitüberschreitungen fest und behandeln Sie sie. Aktivieren und deaktivieren Sie Wiederholungsversuche mit exponentiellem Abfall.

Es ist eine Fähigkeitsfrage

Was waren also diese Kompetenzprobleme, die Sie nicht gefragt haben?

Lernen Sie Ihre Versprechen Ich kann das nicht genug betonen.
Eines der ersten Probleme, auf die ich stieß, war, dass ich nicht verstand, wie die Umsetzung von Versprechen funktioniert. Meine erste Implementierung sah ungefähr so ​​aus:

  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;
  };

Ich bin sicher, dass Sie das Problem sofort erkannt haben. Ich verwende Promise.race, um meine „maximal gleichzeitigen“ Versprechen gleichzeitig auszuführen.
Aber das wird erst weitergehen, wenn das erste Versprechen eingelöst ist. der Rest wird ignoriert. dann füge ich noch 1 hinzu und führe sie erneut aus.
Ich musste zu den Grundlagen zurückkehren.
Die Lösung besteht darin, stattdessen .then und .catch zu verwenden und die Funktion nur dann auszuführen, wenn im aktuell ausgeführten Abschnitt ein Platz frei ist.

  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;
  };

Jetzt behalten wir den Überblick über gleichzeitige Versprechen viel besser, ermöglichen dem Benutzer aber auch, mit Fehlern und Lösungen so umzugehen, wie er es möchte.

Bitte verwenden Sie Abbruch-Controller Einer der großen Fehler, den ich oft sehe, ist, dass Leute keine Abbruch-Controller verwenden, wenn ein Versprechen nach seiner Initialisierung nicht mehr erforderlich ist. Ich habe das auch gemacht.
Um Timeouts durchzuführen, habe ich zunächst Promise.race
verwendet

  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;
  };

Wie Sie sich vorstellen können. Das Versprechen wird auch nach dem Timeout weiterhin ausgeführt. Es wird einfach ignoriert. Das sieht sehr nach meinem ersten Fehler bei der Implementierung der Warteschlange aus, nicht wahr?
Ich habe ein wenig über Abbruch-Controller recherchiert, da meine einzige Erfahrung damit nur die Reaktion war.
AbortSignal.timeout!! das macht genau das, was ich machen wollte!
und die einzige Aktualisierung meines Codes war 1 Zeile

 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, es war so einfach! Jetzt muss der Benutzer des Pakets jedoch ein Boilerplate erstellen, um die Timeout-Funktion nutzen zu können. Kein Grund zur Angst! Das habe ich für dich getan!

  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);
          }
        });
    }
  }

Noch ein weiteres Micro-NPM-Paket

Wie nutzen Sie Asyncrify?
Nun, es ist wirklich einfach. Wir erstellen zunächst unsere Warteschlange.

  #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);
            });
    }

Die Warteschlange hat standardmäßig keine Zeitüberschreitung oder wird in den Ruhestand versetzt, ebenso wie keine maximale Parallelität.
Sie können dem Konstruktor auch ein Konfigurationsobjekt bereitstellen.

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

Um ein Versprechen zur Warteschlange hinzuzufügen, müssen Sie eine Funktion einschließen, die es zurückgibt.

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);
};

Denken Sie daran, den Abbruch-Handler hinzuzufügen, um die Timeout-Funktion nutzen zu können!

Dann müssen Sie nur noch die Funktion mit Ihrem Rückruf und Fehlerrückruf an die Add-Methode übergeben

import Queue from 'Asyncrify'

const queue = new Queue()

Hinzufügen, fertig! Fügen Sie so viele hinzu, wie Sie möchten, so schnell Sie möchten, und es werden immer nur drei auf einmal ausgeführt, bis alle durchgekommen sind!

Ich habe im Laufe der Zeit, in der ich dieses Paket erstellt habe, viel gelernt. Dinge, die ich wohl schon vor langer Zeit hätte wissen müssen. Deshalb schreibe ich diesen Artikel. Ich möchte, dass ihr die wohl dummen Fehler, die ich gemacht habe, erkennt und euch ermutigt fühlt, dumme Fehler zu machen und daraus zu lernen. Anstatt sich zu schämen und sich zurückzuziehen, wenn sie passieren.

Gehen Sie raus und schreiben Sie einen Artikel. Erstellen Sie ein Mikropaket mit 10 wöchentlichen Downloads von Bots. Am Ende werden Sie Dinge lernen, von denen Sie nie wussten, dass Sie sie brauchen

Das obige ist der detaillierte Inhalt vonWie aus einer Netflix-Interviewfrage mein erstes NPM-Paket wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!