AJAX 호출을 위한 자리 표시자 기능

최근에는 백엔드 엔드포인트 없이 사용자 인터페이스(UI)를 만들어야 했습니다. 작업이 진행 중일 때 사용자가 알 수 있도록 UI를 최대한 반응형으로 만드는 데 중점을 두었습니다.

이는 주로 AJAX 호출이 이루어질 때 UI에 이를 표시하고 호출이 완료되면 이에 따라 업데이트해야 함을 의미합니다.

UI 개발을 돕기 위해 AJAX 호출을 시뮬레이션하는 함수를 만들었습니다. 이 기능은 다음을 수행할 수 있습니다.

• 실제 AJAX 호출의 지연을 시뮬레이션하기 위해 지연(밀리초)을 허용합니다
• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!