Synchronous-Asynchronous

Synchronous (동기)

그 다음 동작은 그 함수가 끝날때 가지 기다려야 한다. 이런 처리는 동기적인(Synchronous) 처리이다.
여기서 싱크로너스 or 동기화? 라고생각하면 같은시간에 일이 처리 되는것아닌가? 라고 생각하여 의미를 헷갈려할 수 있다. 그렇다기보단 요청의 마지막과 응답의 시작부분이 정확이 Synchronize 된다고 생각하는게 편하다.

Asynchronous (비동기)

비동기는 그런 시작과 끝이 서로 맞지 않는다. 즉 응답 요청이 일련의 순서로 일어나지않고. 서로의 시작과 끝에 관여해서 일어나지도 않는다.

비동기적 방식이 처리속도면에서 당연히 빠르지만 소요시간보다는 일련의 처리가 더 중요한 상황들이 있다.
동기적으로 처리해야할 일들이 비동기적으로 처리된다면 문제가 생긴다. 자바스크립트에서 이런 문제를 처리할 방법들을 살펴보자.

---

비동기 처리방식

1. Call back

콜백함수를 이용하여 흐름을 처리할 수 있다.(원하는 시점에 작업수행이 일어나도록 만들수있다)
Call back 함수란 다른 함수의 인자로 이용되거나 어떤 이벤트에 의해 호출되어지는 함수이다.
함수의 매개변수로 함수를 사용하는 형태가 Call back pattern 이다.

단순한 예시 위의 print 함수는 plus함수가 결과값을 내놓을 때 까지 기다려야한다. 비동기적 처리과정이 된다.
순차적 코드실행이 (동기적 실행)이 필요해 많은 수의 함수를 중첩하여 만들면 깊이가 너무 깊어져서 감당할 수 없을 것이다.

2. Promise

A promise is an object that may produce a single value some time in the future:

비동기적 처리의 방안으로 Promise가 ES6에서 스펙에 정식 도입되었다.

프로미스는 객체이기 때문에 프로미스 생성자 함수를 통해 인스턴스화 된다.
프로미스의 생성자 함수 프로미스는 콜백함수를 인자로 전달받는데 이 콜백함수는 resolve와 reject 를 인자로 받는다. 이렇게 인자로 전달받은 콜백 함수를 내부에서 비동기 처리 한다.

프로미스의 비동기적 처리 과정에 3가지 상태가있다.

• Pending 대기
• Fulfilled 성공
• Rejected 실패

후속 처리 메소드

함수처리 결과를 이용하여 다른 비동기 함수를 호출할 경우 콜백 패턴을 이용할 수 있지만 갯수가 많아질 경우 콜백헬이 발생한다. 프로미스는 후속처리 메소드 .then() , .catch() 를 이용하여 체이닝하여 여러개의 프로미스를 연결하여 순차적으로 처리할 수 있다.

• then 메소드는 두 개의 콜백함수를 인자로 받는데 첫번째 함수는 성공시, 두번째 함수는 실패시 호출됨
• catch 메소드는 에러가 발생하면 호출됨

3. async-await

await 를 붙여줌으로 인해 result를 콘솔로그에 출력할 수 있다.

프로미스가 콜백의 단점을 극복하기 위해 만들어졌다면 async/await는 프로미스의 단점을 극복하기 위해 만들어졌다.

async 키워드를 함수에 붙여주면 async-await 함수가 된다. 이 함수는 Promise를 반환합니다. then catch로 흐름제어가 가능하다는 것이다. await 키워드를 비동기로 처리되는 부분 앞에 붙여주면 결과값을 받은후 다음 동작이 실행된다.