[js] 자바스크립트 비동기 처리 : 콜백 함수(Promise / Async&await)

🤷‍♀️ 비동기 처리 란?

특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 js 특징

ex) ajax, setTimeout()

 

🤷‍♀️ 콜백 함수 란?

특정 로직이 끝났을 때 원하는 동작 실행

• 콜백함수를 연속해서 사용 시 콜백 지옥 현상
• 해결 ⇒ Propmise 나 Async&await 사용

 

📌 비동기 처리를 위한 Promise

주로 서버에서 받아온 데이터를 화면에 표시하기 위해 사용

 

✔ Promise 상태

Pending (=대기)	Fulfilled (=완료)	rejected (=실패)
비동기 처리 로직이 완료되지 않음	비동기 처리가 완료되어 프로미스가 값을 반환	비동기 처리가 실패하거나 오류 발생
new Promise(function(resolve,reject){ ... })	new Promise(function(resolve, reject){ resolve(); }) ---------- function getData() { return new Promise (function(resolve, reject)){ var data=100 resolve(data) } getData().then(function(resolvedData){ console.log(resolvedData) }) }	new Promise(function(resolve,reject){ reject(); }) ---------- function getData(){ return new Promise(function(resolve, reject){ reject(new Error("Request is failed")) }) } getDate().then().catch(function(err){ console.log(err) })

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

 

 

📌 비동기 처리를 위한 Async&await

읽기 좋은 코드로 작성 가능한 비동기 처리 방식

async function 함수명(){
    await 비동기_처리_메소드_명()
}

async function 함수명(){
    try{
        var user=await fetchUser()
        if (user.id===1){
            var todo = await fetchTodo()
            console.log(todoTitle)
    }
    catch(error){
        console.log(error)
    }
}