Javascript | 비동기 처리 (콜백, 프로미스, await)

 

각 함수와 코드가 순차적으로 실행되는 것을 동기(Synchronous)라고 합니다. 처리가 늦어지는 경우 성능에 문제가 될 수 있기 때문에 여러 작업을 동시에 처리하는 비동기(Asynchronous) 방식이 필요합니다. 비동기 방식은 실행 순서를 장담할 수 없기 때문에 비동기 방식에서 순서를 제어하는 방법이 콜백함수, Promise, async/await 입니다. 

 

목차

 

 

Web API

 

자바스크립트의 비동기 실행이 아닌 웹 브라우저 단에서 비동기적 실행을 가능하게 만든 것입니다. Web API는 타이머, 네트워크, 파일입출력, 이벤트 처리 등 브라우저에서 제공하는 API를 말합니다. 

• 종류 - DOM / XMLHttpRequest, setTimeout() 등

 

 

콜백함수

 

소개

▶ 방식 - 함수의 매개변수 자체에 함수 자체를 넘겨 함수 내에서 매개변수를 실행하는 방식

▶ 단점 - 코드 복잡도를 증가시켜 코드를 읽기 어렵고, 중첩 시 콜백 지옥에 빠질 수 있습니다.

 

사용 방법

▶ 다음은 가장 간단한 콜백함수 구조입니다. 함수 A를 호출할 때 B함수를 인자로서 넘깁니다. 함수 A는 할 일을 다 마치고 나서 인자로 받은 콜백함수 B를 호출합니다. 

function B() {
	...
}

function A(callback_func) {
	...						
    callback_func();		// 처리가 끝난 후 콜백함수 B 호출
}

A(B);				// 콜백함수로 B를 넘김

 

 

프로미스 (Promise) 객체 

 

소개

▶ 방식 - Promise 객체는 비동기 처리를 위한 전용 객체로서 비동기 작업의 성공 또는 실패와 결과값을 나타내는 객체

▶ 단점 - then 핸들러 함수가 남용되면 역시 코드가 복잡해집니다.

 

사용 방법

▶ 객체 생성 - 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용. Promise 생성자 안에 작업이 성공임을 알려주는 객체 resolve와 작업이 실패했음을 알려주는 reject 두 개의 매개변수를 콜백 함수를 넣습니다.

 

const testPromise = new Promise((resolve, reject) => {
	const data = fetch('요청 URL')
    
    if(data) {				// 요청이 성공해 URL를 받아왔다면
     	resolve(data);
    } else {
    	reject("Error")
    }
});

 

▶ Promise 상태(state)

• Pending (대기) - 처리가 완료되지 않은 상태
• Fulfilled (이행) - 처리가 성공적으로 완료
• Rejected (거부) - 처리기 실패로 끝남

▶ Promise 핸들러

• .then() - 프로미스가 이행되었을 때 실행할 콜백 함수 등록
• .catch() - 프로미스가 거부되었을 때 실행할 콜백 함수 등록
• .finally() - 프로미스가 이행되든 거부되든 상관없이 실행할 콜백 함수 등록

▶ Promis.all 메소드 - 비동기 처리 완료 시점을 예측하기 힘들기 때문에 보통 promise.all() 을 사용합니다. 배열 인자인 프로미스 함수들은 각각 비동기로 실행되어 시간을 단축하는 효과도 있습니다.

 

async fuction getAB () {
	let [a, b] = awiat Promise.all ([getA(), getB()]);
    console.log ('${a} and ${b}');
} 
... 
getAB(); 	// A와 B를 실행하는 함수 호출

 

 

 

 

async / await 

 

소개

▶ 방식 - 프로미스 기반으로 작성되지만 프로미스의 코드의 복잡성을 없애기 위해 동기 코드처럼 작성해 비동기 작업을 실행합니다. 

 

사용 방법

function getFunc() {
	return new Promise ((resolve, reject) => {
    	setTimeout(() => {
        	const value = 100;
            resolve(value);
        }, 3000);
    });
}

async function main () {
	let data = await getFunc();
    console.log(data);
}
...
main(); //메인 함수 호출

 

---

 

"무엇을 써야 하는가?" 라는 질문에 대답은 용도에 맞게 3가지 방식을 적절히 사용해야 한다는 것입니다. 비교적 단순한 비동기 작업을 처리할 때 굳이 Promise를 써서 코드를 복잡하게 만들기 보다는 콜백 함수로 간결하게 처리할 수 있기 때문입니다.  

 

관련포스트

JavaScript | 자바스크립트 객체

JavaScript | jQuery 셀렉터와 동작

Web API