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 die Benutzeroberfläche bei einem AJAX-Aufruf dies anzeigen und nach Abschluss des Aufrufs entsprechend aktualisieren sollte.

Um bei der Entwicklung der Benutzeroberfläche zu helfen, habe ich eine Funktion zum Simulieren 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(
  timeout: number,
  probability?: number,
  result?: T
): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!probability || probability  1) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      if (hit 



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: '[email protected]',
        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  1
      ) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      console.log(hit, probability);
      if (hit 



Dieser Beitrag wurde zuerst auf cheehow.dev veröffentlicht