[JS] 비동기 - Callback, Promise, async/await

자바스크립트 비동기 처리 방법

 

1. Callback

• 자바스크립트의 비동기 처리 패턴 중 하나.
• 비동기 결과의 값을 가지고 다른 비동기 작업을 하는 등 중첩이 되는 문제가 있음.
• 이를 콜백헬 또는 멸망의 피라미드라고 하는데 관리가 어려워지는 등 문제때문에 ES6에서 Promise 도입.

 

2. Promise

• 자바스크립트 비동기 연산이 종료된 이후에 처리 결과를 알기 위해 사용되는 객체.
• Promise생성자 함수를 통해 생성하고, 비동기 작업을 수행할 콜백함수를 인자로 받아 사용함.

// Promise만들기

const promise = new Promise((resolve, reject) => {
	if(...){
		...
		resolve("성공!");
	}else{
		...
		reject("실패!");
	}
});

• 비동기를 호출하는 측에서는 Promise의 후속처리 메소드를 사용해서 처리해야함.
• .then (성공시, 실패시)
• then의 첫 인자는 성공시 실행, 두번째 인자는 실패시 실행.(첫번째 인자만 넘겨도 됨)
• Promise 상태값
  • pending: 비동기 처리 수행 전
  • fulfilled: 성공(resolve 호출)
  • rejected: 실패(reject 호출)
  • settled: 성공 or 실패(resolve나 reject가 호출된 상태)
• callback헬을 Promise로 해결: Promise chanining(프라미스 체이닝)
  • 후속처리 메서드 .then을 여러개 연결해 사용

  • new Promise((resolve, reject) => {
    	setTimeout(() => resolve("promise 1"), 1000);
    }).then((result) => { // 후속 처리 메서드 하나를 쓰고,
    	console.log(result); // promise 1
    	return "promise 2";
    }).then((result) => { // 이렇게 연달아 then을 써서 이어줌.
    	console.log(result);
    	return "promise 3";
    }).then(...);

  • 여기서는 Promise가 하나지만, 여러개 만들어서 사용가능 함.
  • 일이 a,b,c라면 각각 Promise객체로 만들고, 
  • 후속 메소드 안에 Promise로 만든 비동기 작업 a,b,c를 .then으로 엮어주면 됨.

 

3. async/await

• Promise 사용을 편하게 만들어 주는 문법.
• async는 function 앞에 위치하고 해당 함수는 항상 Promise를 반환.
• Promise가 아닌 것은 Promise로 감싸서 반환.
• await는 async함수 안에서만 동작.
• 자바스크립트는 await를 만나면 Promise가 처리될 때까지 기다린 후 결과 반환.

• async function myFunc(){
  	let promise = new Promise((resolve, reject) => {
  		setTimeout(() => resolve("완료!"), 1000);
  	});
  	
      console.log(promise);
  
  	let result = await promise; //fulfilled가 될때까지 기다림
  
      console.log(promise);
  
  	console.log(result); //.then을 쓰지 않았지만 1초 후에 완료!가 콘솔에 찍힘
  }

 

실제 코드 작성시에는 Axios나 fetch를 통해 요청을 하면 자동으로 Promise를 반환해 주기 때문에 Promise객체를 직접 생성하는 것보다 Promise로 반환된 객체들을 async/await를 사용해 비동기 처리하는 경우가 대부분.

 

 

 

참고: 스파르타코딩클럽 리액트 심화반