ES6(2015)에서의 변화 3

Users.findOne('zero', (err, user) => {
    if (err) {
        return console.error(err);
    }
    console.log(user);
    Users.update('zero', 'nero', (err, updatedUser) => {
        if (err) {
            return console.error(err);
        }
        console.log(updatedUser);
        Users.remove('nero', (error, removedUser) => {
            if (err) {
                return console.error(err);
            }
            console.log(removedUser);
        });
    });
});
console.log('다 찾았니?');

콜백을 사용하다 보면 깊이가 계속해서 깊어지는 콜백지옥을 경험할 수 있다.

 

 

Users.findOne('zero')
    .then((user) => {
        console.log(user);
        return Users.update('zero', 'nero');
    })
    .then((updatedUser) => {
        console.log(updatedUser);
        return Users.remove('nero');
    })
    .then((removedUsers) => {
        console.log(removedUser);
    })
    .catch((err) => {
    	console.error(error);
    });
console.log('다 찾았니?');

ES6에서는 이를 해결 하기 위해서 promise를 만들었다. 깊이가 깊어지지 않는다.

또 에러를 콜백의 단계마다 따로 작성하던 에러 조건문을 .catch()에서 단한번에 처리 할 수도 있다.

 

 

 

그런데 이 문법의 이름이 왜 promise이고 .then이 있으며 어째서 return문이 있는지 생소하게 다가올 수 있다.

 

 

브라우저의 콘솔에 promise를 타이핑하면 대문자로 시작하는 함수, 즉 생성자임을 알 수 있다.

 

 

 

new Promise((resolve, reject) => {

});

Promise생성자의 형태는 resolve와 reject를 매개변수로하는 함수를 매개변수로 갖는다. 

여기서 resolve는 성공메세지, reject는 실패메세지와 연관되어 있다.

내부에는 원하는 로직으로 코딩을 할 수 있고, 변수에 담아 사용할 수 있다.

 

콜백함수는 호출하는 곳에 그 후의 행동을 바로 작성하도록 되어 있지만

Promise는 로직을 작성하는 것과 .then으로 시작하는 호출을 분리시켜 작성한다.

따라서 호출 후의 행동은 개발자가 원하는 코딩 맥락에서 꺼내어 사용하면된다.

즉 결과는 이미 로직을 작성하는 시점에 나있지만 호출 후의 행동을

개발자가 원할때 율통성 있게 제어할 수 있는 장점을 가진다.

 

 

 

 

const plus = new Promise((resolve, reject) => {
    const a = 1;
    const b = 2;
    if (a + b > 2) {
        resolve(a + b);
    } else {
        reject(a + b);
    }
});


plus
    .then((success) => {
        console.log(success);
    })
    .catch((fail) => {
        console.error(fail);
    })

 

 

 

아까 본 Users.findOne 메서드에서 promise형태의 문법을 사용할 수 있었던 이유도 사실

const Users = {
    findOne() {
        return new Promise((res, rej) => {
            if ('사용자를 찾았으면') {
                res('사용자');
            } else {
                rej('못 찾았어요');
            }
        })
    }
}
Users.findOne()

내부적으로 Promise를 리턴하도록 메서드를 작성하여 Users로 받았기 때문이다.

따라서 사용시 .then과 .catch를 사용할 수 있게 된 것이다.

Promise를 리턴하지 않는 콜백 메서드라면 promise문법을 사용할 수 없다.

 

 

const condition = true;
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});




promise
    .then((message) => {
        return new Promise((resolve, reject) => {
            resolve(message);
        });
    })
    .then((message2) => {
        console.log(message2);
        return new Promise((resolve, reject) => {
            reject(message2);
        });
    })
    .then((message3) => {
        console.log(message3);
    })
    .catch((error) => {
        console.error(error);
    });

then을 연달아 쓰는 형태라면 이렇게 실행한 것이다.

then에 리턴값이 있으면, 다음 then으로 넘어가도록 되어있다.

Promise를 리턴하면 resolve나 reject되어 넘어간다.

 

---

Promise.all([Users.findOne(), Users.remove(), Users.update()])
    .then((results) => {})
    .catch((error) => {})

Promise.all()을 이용하면 작성해둔 promise들을 여러개 한꺼번에 실행 하여 결과를 얻어올 수도 있다.

promise들 중에 하나라도 reject에 해당한다면 결과를 얻어 올 수 없다는 점은 주의해야한다.

 

---

const condition = true;
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});





const promise = new Promise((res, rej) = {
	res('성공');
});

const promise = new Promise((res, rej) = {
	rej('실패');
});



const successPromise = Promise.resolve('성공');
const failurePromise = Promise.reject('실패');

조건에 따라 성공과 실패가 나뉘는 promise가 아닌
무조건 성공하는 promise나 무조선 실패하는 promise는
간략하게 작성할 수 있다.

 

출처, 참조: https://www.zerocho.com