[자바스크립트] 동기 / 비동기

동기(synchronous)

서버에서 요청을 보냈을 때, 응답이 돌아와야 다음 동작 수행이 가능 A -> B

비동기보다 디자인이 간단하고 직관적일 수 있지만, 결과가 주어질 때까지 대기해야 함 

 

비동기(Asynchronous)

비동기적 코드의 실행 결과는 동기적 코드가 전부 실행된 뒤에 값을 반환함

동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 시간동안 다른 작업을 할 수 있어 보다 효율적 

비동기 요청 시, 응답 후 처리할 콜백 함수를 함께 알려준다. 해당 테스크가 완료되었을 때 '콜백 함수'가 호출 

→ 콜백 패턴을 사용하면, 여러개의 콜백함수가 중첩되 나타나는 콜백 지옥이 발생 

 

※ 자바스크립트에서 비동기 구현의 방식3 

1) 콜백함수 

2) Promise 

3) await / aysnc

 

Promise

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용(데이터 요청하고 받아옴)

비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용 → 콜백지옥현상

ES6에서 비동기 처리를 위한 다른 패턴으로 promise를 도입 

 

전통적인 콜백 패턴이 가진 단점을 보완해, 비동기 처리 시점을 명확하게 표현

promise 생성자 함수를 통해 인스턴스화되어, 비동기 작업을 수행할 콜백 함수를 인자로 전달받음

promise는 비동기 처리가 성공 or 실패했는지의 상태 정보를 가짐(pend / fulfiled / rejected /settled)

 

Promise 호출 과정 

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

 

후속처리메소드

then : 두 개의 콜백 함수를 인자로 전달 받음, 첫번째 콜백 함수는 성공시 호출되고 두번째 함수는 실패 시 호출

catch :  예외가 발생할 경우 호출(catch 메소드는 Promise를 반환) 

 

 

Async / Await

최근 자바스크립트 문법에 추가된 비동기 처리 패턴

기존의 콜백과 Promise의 단점을 보완 ( 특히, 가독성 부분을 집중적으로 보완)

Async와 Await을 사용하려면 우선 사용할 함수 앞에 async라는 키워드를 붙여 사용해야 하며 선언된 async 함수 안에서만 await 키워드를 사용할 수 있다

 

 

 

참고자료

https://ko.javascript.info/promise-error-handling

https://hongchangsub.com/javascript-asyncandsync/