[자바스크립트_개념정리] 비동기 프로그래밍과 Promise

동기 프로그래밍

한번에 하나씩 순서대로 처리함으로 하나의 작업이 끝나고 나서 다음 작업이 진행된다

브라우저의 자바스크립트 엔진이 한번에 하나의 작업만 수행할 수 있기에

자바스크립트는 기본적으로 동기적으로 수행한다 (싱글 쓰레드 언어)

그러나 오래 걸리는 작업을 할 때 동기식 작업은

블로킹(blocking)이라는 현상을 발생시킨다

블로킹 : 작업1이 완료될 때 까지 다음 작업2,3이 진행되지 못하고 막히는 상황

비동기 프로그래밍 방식으로 블로킹을 해결할 수 있다

비동기 프로그래밍

하나의 작업이 끝날 때까지 기다리지 않고 바로 다음 작업을 진행함으로 블로킹이 없다

자바스크립트 엔진은 싱글쓰레드인데 어떻게 비동기가 가능하냐???

=> web APIs덕분 (자바스크립트 엔진이 아닌 별도의 브라우저 환경(멀티쓰레드)에서 실행됨)

자바스크립트 언어와 별개로 여러 API를 제공 (setTimeout, fetch, DOM)

setTimeout(콜백함수, 지연시간)은 브라우저가 제공하는 대표적 비동기적 함수인데

지연시간이 끝나길 기다리지 않고, setTimeout이 멀티쓰레드 환경에서 진행되는 동안 다음 작업이 진행되는 것임

이때 인자로 주어진 콜백함수도 함께 멀티쓰레드 환경으로 넘어감

Promise

비동기 처리에 사용되는 자바스크립트 객체로

비동기 작업의 상태인 성공/실패를 나타냄

[syntax]

const promise = new Promise((resolve, reject) => {
  //비동기 작업
  if(condition) {
    resolve();	//비동기 작업이 성공하면 resolve함수를 호출
  } else {
    reject(Error 객체);	//실패하면 reject함수 호출. error객체 넣는 것이 보편적 
  }
});

//new키워드 사용해서 promise객체 생성
//resolve와 reject라는 인수를 가짐

Promise는 state와 result라는 속성을 가진다

state는 3단계의 작업 상태를 나타내는데

Pending : 대기  => state가 pending일 때 result 값은 undefined

Fulfilled : 성공  => state가 fulfilled일 때 result 값은 비동기 작업의 결과값

Rejected : 실패  => state가 fulfilled일 때 result 값은 error

[ 비동기 작업 성공 시 ]

[ 비동기 작업 실패 시 ]

콜백지옥 피하기

다수의 비동기 작업을 순차적으로 수행하기 위해서 콜백함수를 사용하는데

이 때 이른바 ‘콜백지옥’이라 하는 현상이 발생한다

Promise 객체인 ’ then() / catch() / finally() ‘ 사용으로 후처리를 간편하게 할 수 있다

셋 모두 promise를 리턴하며 콜백함수를 전달받는다

then() : 비동기 작업이 resolve(성공)된 후 수행할 작업

catch() : Reject(실패)하면 수행할 에러 처리 작업

finally() : 성공, 실패 상관없이 마지막에 무조건 실행할 작업

=> promise객체 생성과 동시에 비동기 작업이 시작되는데

이를 피하기 위해 함수 안에서 promise 객체를 만들어 함수를 호출할 때 객체가 생성되고 비동기 작업이 시작되도록 함

getData함수를 호출할 때 비동기 작업의 진행 상태를 알아야 하기 때문에 return promise;

[비동기 작업 성공 시]

[비동기 작업 실패 시]

Promise chaining

여러 비동기 작업을 순차적으로 진행할때 then()안에서 Promise가 반환되는 함수를 반환시킨다

then()의 반환값이 다음 then()으로 전달된다

then()안에서 ‘값’을 반환하면 그 값이 promise로 감싸져 바로 resolve된 상태로 다음 then으로 넘어감 => 즉시 사용가능