Fungsi pemegang tempat untuk panggilan AJAX-tutorial js-php.cn

Placeholder function for AJAX calls

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 menunjukkannya 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 adalah di bawah (lihat intipati untuk sampel kod lengkap dengan docstring):

export async function delay( timeout: number, probability?: number, result?: T ): Promise { return new Promise((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); }); }

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!