Platzhalterfunktion für AJAX-Aufrufe

Ich musste kürzlich eine Benutzeroberfläche (UI) erstellen, ohne dass die Backend-Endpunkte vorhanden waren. Der Fokus lag darauf, die Benutzeroberfläche so reaktionsfähig wie möglich zu gestalten, damit der Benutzer erkennen kann, wann eine Aktion ausgeführt wird.

Dies bedeutet hauptsächlich, dass bei einem AJAX-Aufruf die Benutzeroberfläche dies anzeigen und entsprechend aktualisieren sollte, wenn der Anruf abgeschlossen ist.

Um die Entwicklung der Benutzeroberfläche zu unterstützen, habe ich eine Funktion zur Simulation von AJAX-Aufrufen erstellt. Die Funktion kann:

• Akzeptieren Sie eine Verzögerung (in Millisekunden), um die Verzögerung ab einem tatsächlichen AJAX-Aufruf zu simulieren
• Akzeptieren Sie eine Wahrscheinlichkeit, dass die Simulation fehlschlägt, wenn ein AJAX-Aufruf fehlschlägt
• eine bereitgestellte Nutzlast zurückgeben

Der TypeScript-Code ist unten (das vollständige Codebeispiel mit der Dokumentzeichenfolge finden Sie im Kern):

export async function delay<T>(
  timeout: number,
  probability?: number,
  result?: T
): Promise<T> {
  return new Promise<T>((resolve, reject) => {
    setTimeout(() => {
      if (!probability || probability < 0 || probability > 1) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      if (hit < probability) {
        resolve(result);
      } else {
        reject(
          `Placeholder rejection (${Math.round(
            hit * 100
          )}%) - this should NOT appear in production`
        );
      }
    }, timeout);
  });
}

Um diese Funktion zu verwenden:

async function handleButtonClick() {
  // Update the UI to show a loading indicator.

  try {
    // highlight-start
    // Make the call take 3 seconds, with a 10% chance of failure,
    // and return an array of users.
    const result = await delay(3000, 0.9, [
      {
        email: 'user1@example.com',
        username: 'User 1',
      },
    ]);
    // highlight-end

    // Update the UI when the call completes succesfully.
  } catch (err: any) {
    // Update the UI when the call fails.
  }
}

Die JavaScript-Version derselben Funktion unten:

export async function delay(timeout, probability, result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (
        !probability ||
        typeof probability !== 'number' ||
        probability < 0 ||
        probability > 1
      ) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      console.log(hit, probability);
      if (hit < probability) {
        resolve(result);
      } else {
        reject(
          `Placeholder rejection (${Math.round(
            hit * 100
          )}%) - this should NOT appear in production`
        );
      }
    }, timeout);
  });
}

Dieser Beitrag wurde zuerst auf cheehow.dev veröffentlicht

Das obige ist der detaillierte Inhalt vonPlatzhalterfunktion für AJAX-Aufrufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!