TIL 20251124

JS

• 비동기 처리

  비동기 처리

• CallBack

  • 다른 함수의 매개변수로 전달하여 나중에 실행되게 하는 함수

    • setTimeout(매개함수, 시간) 형식

• Promise

  • 나중에 결과 값을 제공하기 위해 나온 비동기 객체 키워드

  • 값 제공을 위한 비동기 처리 키워드 resolve, reject 사용

    function simulateDB(data, delay = 1000) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (data) {
            resolve(data);
          } else {
            reject(new Error('데이터 없음'));
          }
        }, delay);
      });
    }
    
    // 다른 형태
    function fetchUserData(id) {
     return fetch(`https://mockup.com/users/${id}`)
     .then(response => response.json())
     .then(data => {
      console.log("user_data : ", data);
      return data;
      })
     .catch(error => {
      console.log("error : ", error.message);
      throw error;
      });
    }
    
    fetchUserData(id)
    .then(result => console.log("result : ", result))
    .catch(error => console.log("error : ", error));

    • 주로 체인을 통해 then, catch로 resolve, reject 를 받아 사용

• async, await

  • Promise의 ES2017 버전으로 발전된 형태

  • 좀더 선언이 간결해짐

    async function fetchUserData2(id) {
     try {
      const response = fetch(`https://mockup.com/users/${id}`);
    
      if(!response.ok) {
       throw new Error("response error");
      }
    
      const data = await response.json();
      return data;
     } catch(error) {
      throw error;
     }
    }
    
    console.log(fetchUserData2(id));