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

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

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

• 실제 AJAX 호출의 지연을 시뮬레이션하기 위해 지연(밀리초 단위)을 허용합니다.
• AJAX 호출이 실패할 때 시뮬레이션에 실패할 확률을 수락합니다.
• 제공된 페이로드를 반환합니다.

TypeScript 코드는 다음과 같습니다(문서 문자열이 포함된 전체 코드 샘플은 요지를 참조하세요):

export async function delay(
  timeout: number,
  probability?: number,
  result?: T
): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!probability || probability  1) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      if (hit 



이 기능을 사용하려면:


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: '[email protected]',
        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  1
      ) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      console.log(hit, probability);
      if (hit 



이 게시물은 cheehow.dev에 처음 게시되었습니다.