Javascript / 비동기 정리 및 Promise, async, await 비교

 

 

 

비동기(Asynchronous)

 

-  동기 : 한줄이 끝나면서 순차적으로 다음 줄이 실행되는 것

- 비동기 : 어떤 작업이 끝나길 기다리지 않고, 다음 코드를 먼저 실행하는 것.

console.log("1");
setTimeout(() => console.log("2"), 1000);
console.log("2");
 
// 비동기 실행으로 인하여 출력 순서가 1, 3, 2 순서로 실행이 된다.

 

Promise

 

- Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체이다.

const promise = new Promise((resolve, reject) => {
    const success = true;
    
    if(success) {
        resolve("성공!");
    } else {
        reject("실패!");
    }
});
 
// 실행 코드는 Promise 체이닝 방법으로 작성
 
promise
    .then((result) => { // 성공 시 실행
    console.log(result);
})
    .catch((error) => {
    console.log(error); // 실패 시 실행
})
    .finally(() => {
    console.log("끝"); // 마지막으로 무조건 실행
})
 
/* Promise의 상태 3가지!
  
    1. pending : 대기 중
    2. fulfilled : 성공(resolve 호출됨)
    3. rejected : 실패(reject 호출됨)
 
*/
 
 

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("데이터 도착!"), 2000);
    });
}; 
// 2초 뒤에 데이터가 도착하는 Promise 함수
 
const showData = async() => {
    console.log("데이터 요청 중...");
    const result = await fetchData(); // fetchData()의 Promise가 끝날 때까지 기다림
    console.log(result);
    console.log("완료함");
};
 
showData();

 

장단점

 

Promise : 체이닝, 병렬 처리에 강한 장점이 있으나, 콜백이 많아지면 콜백 지옥에 빠질 가능성이 있다.

async/await : 동기 코드처럼 얽혀, 에러 처리가 간단하다. 병렬 처리는 Promise의 도움을 받아야 한다.

 

정리

 

API 에서 간단한 데이터나 시간이 오래 걸리지 않는 데이터를 받을때는 (거의 대부분 웹사이트 데이터 전달) 

async/await를 사용하는 것이 좋고, 빅데이터나, 거대한 데이터를 전달할때는 성능 최적화 부분도 중요하므로

그럴때는 Promise의 Promise.all 등을 사용해서 코드를 커스텀 해야한다.