async-3(promise & handle async with promise)

GI JUNG·2023년 1월 25일

Then catch finally how to handle async promise

javascript

목록 보기

9/12

이제 promise에 대해서 다룰 차례이다. 이전 블로그에서는 사실상 간단하게 배경의 색깔을 바꾸는 작업을해서 엄청 큰 불편함은 못 느끼고 코드가 길어지면 머리가 아프겠구나 하고 callback에 대한 문제점을 지적만 하고 넘어갔다. 하지만, 직접 겪어보는 것도 좋겠다 싶어서 예제를 만들어 시도해 봤다. promise를 배우면서 promise가 실생활에서 자주 쓰이는 예제는 api를 통해 data를 가지고와서 data에 원하는 작업을 하는데 많이 쓰임을 알 수 있다. 이 때, 원하는 작업을 하기 위해서는 data가 확실히 있음을 보장해야한다. 따라서 아래는 가짜 요청을 만드는 예제이다.

🍀 Fake Request with callback

아래 예제의 흐름은 간략히 하면 아래와 같다.

delay: 서버에서 정한 timeout 기준
fetchFromURL: delay시간을 넘지 않는다면 성공이므로 다음 요청을 실행, delay시간을 넘는다면 거절이므로 다음 요청을 수행하지 못함.
총 3번의 요청만 보내며 delay는 random한 값이다.

flow
1. button을 누르면 요청을 보내기 시작함
2. 첫 번째 url에 요청을 보냄
3. 두 번째 요청 여부

- 첫 번째 요청 성공 시: 두 번째 url에 요청을 보냄
- 첫 번째 요청 거절 시: 두 번째 url에 요청을 보내지 못함.

2와 3 반복

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./src/learn-promise.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <button class="start-fetch" style="background-color: black; color: white">
      click to see async with callback!!
    </button>
    <div style="margin-top: 20px" class="container-result">
      <textarea rows="20" cols="50" class="result"></textarea>
    </div>
  </body>
</html>

// learn-practice.js
const $result = document.querySelector(".result");
const $button = document.querySelector(".start-fetch");

const renderLog = (text) => {
  $result.textContent += `\n ${text}`;
};

const miliToSecond = (miliSecond) => {
  return (miliSecond / 1000).toFixed(2);
};

const fetchFromURL = (url, success, fail) => {
  const delay = Math.random() * 2000 + 500;

  setTimeout(() => {
    renderLog("=".repeat(20));

    renderLog(`It takes ${miliToSecond(delay)} seconds from ${url}`);

    delay < 2000
      ? success(`response from ${url} succeed! can go next step`)
      : fail(`response from ${url} failed... can't go next step`);
  }, delay);
};

const onButtonClick = () =>
  fetchFromURL(
    "first url",
    (successMessage) => {
      renderLog(successMessage);
      fetchFromURL(
        "second url",
        (successMessage) => {
          renderLog(successMessage);
          fetchFromURL(
            "third url",
            (successMessage) => {
              renderLog(successMessage);
            },
            (failMessage) => {
              renderLog(failMessage);
            }
          );

          renderLog("after second success!!");
        },
        (failMessage) => {
          renderLog(failMessage);
        }
      );

      renderLog("after first success!!");
    },
    (failMessage) => {
      renderLog(failMessage);
    }
  );

$button.addEventListener("click", onButtonClick);