我最近必須在沒有後端端點的情況下建立使用者介面 (UI)。重點是使 UI 盡可能響應,以便用戶可以知道何時正在進行操作。
這主要表示當進行 AJAX 呼叫時,UI 應進行指示,並在呼叫完成時進行相應更新。
為了幫助 UI 的開發,我建立了一個函數來模擬 AJAX 呼叫。此函數能夠:
TypeScript 程式碼如下(請參閱帶有文件字串的完整程式碼範例的要點):
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); }); }
要使用此功能:
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. } }
以下相同函數的 JavaScript 版本:
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); }); }
這篇文章首次發佈於 cheehow.dev
以上是AJAX 呼叫的佔位符函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!