Fungsi pemegang tempat untuk panggilan AJAX

Baru-baru ini saya terpaksa mencipta antara muka pengguna (UI) tanpa titik akhir hujung belakang dipasang. Tumpuan adalah untuk menjadikan UI sebagai responsif yang mungkin supaya pengguna dapat mengetahui apabila tindakan sedang dijalankan.

Ini kebanyakannya bermakna apabila panggilan AJAX dibuat, UI harus menyatakan demikian dan mengemas kini yang sepadan apabila panggilan selesai.

Untuk membantu dengan pembangunan UI, saya mencipta fungsi untuk mensimulasikan panggilan AJAX. Fungsinya mampu:

• terima kelewatan (dalam milisaat) untuk mensimulasikan kelewatan daripada membuat panggilan AJAX sebenar
• terima kebarangkalian gagal untuk mensimulasikan apabila panggilan AJAX gagal
• kembalikan muatan yang dibekalkan

Kod TypeScript berada di bawah (lihat intipati untuk sampel kod lengkap dengan docstring):

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

Untuk menggunakan fungsi ini:

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

Versi JavaScript fungsi yang sama di bawah:

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

Siaran ini pertama kali diterbitkan di cheehow.dev

Atas ialah kandungan terperinci Fungsi pemegang tempat untuk panggilan AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!