node js 에서 비동기 처리

진·2020년 10월 21일

백엔드

좌충우돌

목록 보기

20/26

비동기 처리 기본

https://scoutapm.com/blog/async-javascript
해당 글 더 읽고 글 마무리하기

js의 비동기 처리는 어떤 코드의 Operation이 끝날 때까지 기다려주지 않고 다른 코드를 먼저 실행하는 자바스크립트의 특성을 말함.

그런데 이런 비동기 처리는 callback 함수로 해결 가능.

callback

callback은 말 그대로 아래 예시코드와 같이 전달 인자로 보내서 다른 함수 내에서 실행시키는 함수를 지칭한다.

// 출처: https://www.dashingd3js.com/lessons/javascript-callback-functions
function functionTwo(var1, callback) {
    callback(var1);		
}

functionTwo(1, function (x) { alert(x); })

그러나 이건 synchronous 한 callback의 경우이고, asynchronous한 callback의 경우,
callbacks는 asynchronous한 operation을 끝내고도 code 실행을 지속해야 하는 경우에 해당한다.
가장 좋은 예시는 promise가 fulfill 또는 reject된 이후의 .then() 블록(promise와 chain된) 속에서 실행되는 callback functions라고 할 수 있다.

callback 지옥이 발생할 수 있으니 주의해야 함.

promise

참고1: https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

주로 서버에서 데이터 요청하고 받아올 때 사용(웹에서 js 사용할 때의 예시). 데이터를 받아오기도 전에 화면에 데이터를 표시하려고 하면 오류/빈 화면이 뜸. 이때 해결 방법이 promise.

// 출처: 참고1
function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

promise의 3가지 상태:

pending(+resolve, reject)
fulfilled(then()을 이용해서 처리 결과 값 받기 가능)
rejected(catch()을 이용해서 error 값 받기 가능)

callback 지옥이 발생하지 않게 promise chain혹은 async/await 이용 가능

async와 await

asynchronous code의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어 준다고 보면 됨.

async는 예약어, function 앞에 키워드로 붙인다.
await는 API 호출 함수(HTTP통신을 하는) 코드 앞에 붙인다. 이때 해당 함수가 꼭 프로미스 객체를 반환해야 한다.

예외처리는 try catch문을 통해서 처리하면 된다.

// 출처: https://joshua1988.github.io/web-development/javascript/js-async-await/
async function logTodoTitle() {
  try {
    var user = await fetchUser();
    // fetchUser는 Promise 반환 객체
    if (user.id === 1) {
      var todo = await fetchTodo();
      // fetchTodo는 Promise 반환 객체
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}