Vanilla JS - 콜백(callback)과 프로미스(promise) 비교

ES2015 이전에는 콜백형태로 비동기를 사용했다.

콜백형태의 단점: 계속해서 콜백 내에서 작업해야되며 깊이가 깊어져 시안성이 낮다

ES2015 Promise가 등장하면서 직관적으로 코딩이 가능하다.

Users.findOne('kim', (err,user)=>{
    if(err){
        return console.error(err)
    }
    console.log(user);
​
    // 한번 콜백을 사용하면 계속 콜백안에서 작업해야된다.
    Users.update('kim', 'jeong', (err, updateUser)=>{
        if(err){
            return console.error(err)
        }
        console.log(updateUser);
        Users.remove('jeong', (err, removeUser)=>{
            if(err){
                return console.error(err)
            }
            console.log(removeUser);
        });
    });
});
​
​
//// 프로미스 형태로 변경 ////
// then에 `리턴값이 있으면` 즉 resolve로 성공했으면 다음 then으로 넘어간다
// promise를 리턴하면 resolve나 reject되어 넘어감
Users.findOne('kim')
    .then((user) => {
        console.log(user);
        return new Promise((resolve, reject) => {
            resolve(updateUser); //성공
        });
    })
    .then((updateUser) => {
        console.log(updateUser);
        return new Promise((resolve, reject) => {
            resolve(removeUser); //성공
        });
    })
    .then((removeUser) => {
        console.log(removeUser);
    })
    .catch((err) => {
        console.error(error);
        // 중간에 실패(reject)하면 이후 then은 무시하고 catch로 온다.
    });
​

프로미스 사용방법

프로미스는 결과값을 가지고 있지만, then 이나 catch가 나오기전엔 반환하지 않는다.

//// 프로미스 선언 ////
const plus = new Promise ((resolve, reject)=>{
    const a=1;
    const b=2;
    if (a+b<2){
        resolve(a+b); // 성공 -> then
    }else{
        reject(a+b); // 실패 -> catch
    }
});
​
// resolve가 되면 then 으로,
// reject가 되면 catch로 반환된다.
plus
    .then((success)=>{
        console.log('성공! ',success);
    })
    .catch((fail)=>{
        console.error('실패! ',fail);
    });

실패!  3

Promise를 리턴하는 함수형태

//// 함수형 ////
const Users = {
    seletUser(){
        return new Promise((res,rej)=>{
            if('사용자 존재'){
                res('user01');
            }else{
                rej('회원가입을 해주세요');
            }
        })
    },
    removeUser(){
        return new Promise((res,rej)=>{
            if('사용자 삭제 완료'){
                res('탈퇴 완료');
            }else{
                rej('사용자 삭제 실패');
            }
        })
    }
}
​
Users.seletUser()
    .then()
    .catch();
​
Users.removeUser()
    .then()
    .catch();

무조건 성공/실패 하는 Promise는 줄여서 사용가능

const promise = new Promise((res, rej)=>{
    res('성공');
    // rej('실패');
});
​
const successPromise = Promise.resolve('성공');
    .then();
const failurePromise = Promise.reject('실패');
    .catch();

여러개의 promise를 동시에 실행가능함.

Promise.all([Users.findOne(), Users.remove(), Users.update()])
    .then((results)=>{}) // 결과가 배열로 들어옴
    .catch((error)=>{}) // 단, 하나라도 실패하면 catch에 모두 값이 담긴다