최근에는 백엔드 엔드포인트 없이 사용자 인터페이스(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!