JS - 비동기 처리

 
function fetchMenuInfo() {
   return $.get("http://domain.com/api/menu", function(response) {
   });
}

// 1. 사용자 정보 요청
fetchUser(); // 0.1초

// 2. 좌측 메뉴 정보 요청
let menu;
fetchMenuInfo(function(response) {
   menu = response;
   // 4. 페이지 UI 표시
renderPageUI(menu); // 2초
}); // 1시간

// 3. 영상 본문 요청
fetchContents(); // 1초


// 총합: 최소 1시간

function fetchMenu(callbackFunction) {
   setTimeout(() => {
      // #2
      let data = {firstMenu: "구독" };
      callbackFunction(data);
      return data;
   }, 5000);
   // return { firstMenu: "구독" }
}

let menu;
 fetchMenu(function(result) {
   // 호출되면 실행할 코드를 넣어주세요.
   console.log("5초 뒤 실행", result);
   menu = result;
});

// #1
console.log("출력 결과: ", menu)

function fetchMenu(callbackFunction) {
   return new Promise(function (resolve, reject) {
      setTimeout(() => {
      // #2
      let data = { firstMenu: "구독" };
      
      if (error) {
        reject(error)
      }
      resolve(data);
   }, 5000);
   });
}

let menu;

// 프로미스 문법으로 작성된 코드
fetchMenu() // Promise 객체여야만 then, catch 유효하게 동작
.then(reunderPageUI)
.then(function (result) {
   // 호출되면 실행될 코드를 넣어주세요.
   console.log("5초 뒤 실행", result);
   menu = result;
}).catch(funtion (error) {
   console.log("에러 처리");
   return;
});



// 콜백 함수로 작성된 코드
 fetchMenu(function(error, result) {
   if (error) {
      console.log("에러 처리");
      return;
   }
  // 호출되면 실행될 코드를 넣어주세요.
   console.log("5초 뒤 실행", result);
   menu = result;
});
// #1
console.log("출력 결과: ", menu)

renderPageUI(function (error, response) {
   response;
})

// async await 기본 문법
async function 함수명() {
   await 비동기_처리_메서드_명();
   // await 는 프로미스를 반환하는 API나 메서드 앞에 붙여야함.
}


async function init() {
   // 1. 메뉴 선언
   let menu; // undefined
   // 2. 메뉴 데이터 호출해서 할당
   menu = await fetchMenu();
   // 3. 메뉴 데이터 콘솔에 출력
   console.log(menu);
}

init();

async function logTodoTitle() {

  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }

}