[JavaScript] 프로미스(promise), async/await

자바 스크립트와 Node.js

- 비동기 프로그래밍으로 이벤트 주도 방식을 사용하기 때문에 콜백 함수 사용

- 콜백 함수 : 매개변수를 통해서 다른 함수의 내부로 전달되는 함수

- ES2015부터 콜백 대신 API들이 프로미스 기반으로 재구성

 

프로미스(Promise)

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

- ECMAScript6- 비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성- 프로미스를 사용하면, 비동기 작업들을 순차적으로 진행하거나, 병렬로 진행하는 컨트롤이 수월해진다.

- new Promise로 프로미스 생성

- resolve, reject를 매개변수로 갖는 콜백 함수를 넣는 방식 

- resolve가 호출되면 then, reject가 호출되면 catch가 실행 된다.

- resolve 호출 -> resolve('성공') -> message에 '성공'이 들어가 출력

- reject 호출 -> resolve('실패') -> message에 '실패'가 들어가 출력

const condition = true;
 
const promise = new Promise((resolve, reject) => {
    if (condition){
        resolve('성공');
    } else {
        reject('실패');
    }
});
 
promise
    .then((message) => {
        console.log(message);
    })
    .catch((error) => {
        console.log(error);
    });

 

Promise.all

- 프로미스를 여러개 한꺼번에 실행

- 모든 프로미스가 resolve 상태여야 then 실행

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
 
Promise.all([promise1, promise2])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(err);
    });

 

async/await

• ES2017에 추가된 기능
• Node version 7.6
• 비동기 프로그래밍을 할 때 유용하게 사용되고, 콜백의 복잡성을 해결하기 위한 프로미스를 조금 더 깔끔하게 만들어주는 역할
• 기존 프로미스 사용 코드 

function findAndSaveUser1(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'kim';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({gender: 'm'});
        })
        .then((user) => {
            // 생략
        })
        .catch(err => {
            console.error(err);
        });
}

• async/await 문법 사용
  • function 앞에 async를 붙여주고
  • 프로미스 앞에 await를 붙여준다.

async function findAndSaveUser(Users) {
    try{
        let user = await Users.findOne({});
        user.name = 'kim';
        user = await user.save();
        user = await Users.findOne({gender: 'm'});
        // 생략
 
    } catch(err) {
        console.error(err);
    } 
}