동기 (Synchronous)

한 작업이 완료된 후 그 다음 작업을 진행하는 처리 방식, 직렬적

실제로 CPU가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하된다.

비동기 (Asynchronous)

작업의 완료 유무와 상관 없이 동시에 다음 작업을 수행하는 처리 방식, 병렬적

응답 후 처리할 '콜백 함수'를 함께 알려주고, 해당 태스크가 완료되었을때 '콜백함수'가 호출된다. 비동기처리를 수행하기 위해 콜백,프라미스,async await를 사용한다.

🍀 Callback

특정 조건에서 실행되는 함수
특정 시간에 도달하거나 특정 이벤트가 실행됐을때 시스템에서 호출하는 함수

비동기처리는 잘 되지만 코드가 복잡해지고 콜백 지옥에 빠지게된다. 콜백 헬은 가독성을 나쁘게하고 실수를 유발하는 원인이 된다.

🍀 Promise

최종 결과를 반환하기보다는, 미래의 어떤 시점에 결과를 제공하겠다는 의미
전통적인 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확히 표현할 수 있다는 장점이 있다.

// promise 기본구조

const promise = new Promise ((resolve, reject)=>{
  
	// ... 비동기 처리할 영역
  
})

Promise 객체는 3가지 상태를 갖는다.
이 3가지 상태와 Promise 객체의 콜백함수의 인자인 resolve, reject는 일접한 관계가 있다.

• 대기 pending (이행도 거부도 아닌 초기상태)
  - resolve, reject가 실행되지 않은 상태
• 이행 fulfilled (성공)
  - resolve가 실행
• 거부 rejected (실패)
  - reject가 실행

👉🏻 Promise() 호출과정

만든 Promise는 then , catch, finally 를 통해 사용가능

// 1. resolve
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('mine-it-record');
    }, 2000);
});

promise.then( result => {
    console.log(result);
});

// 처리결과
// mine-it-record

// 2. reject
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error('error!'));
    }, 2000);
});

promise.then( result => {
    console.log(result);
})
.catch(error => {
    console.log(error);
}).finally(() => {
    console.log('finally');
});

// 처리결과
// error!
// finally

resolve는 then을 통해 결과값을 받아서 처리 가능
reject는 catch를 통해 결과값을 받아서 처리 가능
finally는 resolve를 사용하거나 reject를 사용해도 상관없이 무조건 실행된다.

처리 결과는 후속처리 메서드로 전달된다.
후속처리 메서드에는 then (Promise 반환), catch(예외)가 있다.

then
then 메서드는 두 개의 콜백 함수를 인자로 전달받는다. 첫번째 콜백함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고, 두번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다. Promise를 반환한다.

catch
예외 (비동기 처리에서 발생한 에러, then 메서드에서 발생한 에러) 가 발생하면 호출. Promise를 반환한다.

👉🏻 Promise Chaining

Promise의 특징 중 하나, then을 나열함으로써 순차적으로 제어 가능

비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 콜백 헬이 발생한다. 프로미스는 후속 처리 메소드인 then이나 catch로 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용하여 콜백 헬을 해결. return을 다음 then에서 받아서 사용하는 방식

따라서, then 메소드가 Promise 객체를 반환하도록 하면(then 메소드는 기본적으로 Promise를 반환한다.) 여러 개의 프로미스를 연결하여 비동기 통신을 간단하게 순차적으로 제어할 수 있다.

🍀 async await

비동기지만 동기식으로 사고하고 코딩이 가능하게 한 최신 문법
기존 문법들의 단점을 보완
특히 복잡했던 Promise를 조금 더 편하게 사용할 수 있게 되었다.
실행 여부를 then, catch 로 분기하지 않고 코딩할 수 있다.

👉🏻 async

async 가 붙은 함수는 반드시 프라미스 리턴, 프라미스가 아닌 일반 리턴 값을 보내도 프라미스로 감싸 반환.

👉🏻 await

await 는 async 함수 내에서만 동작한다. 프라미스가 처리될때까지 함수 실행을 기다리는 역할을 한다.

함수를 호출하고 함수 본문이 실행되는 도중에 await 가 붙은 곳의 실행이 잠시 중단되었다가, 프라미스가 처리되면 실행이 재개된다.