javascript, jQuery & Node.js/Node.js 사용전 자바스크립트

Promise 콜백함수 프로미스로 대처 / ES2015 & ES6 - 07

yy_dd2 2022. 12. 8. 00:45
반응형

콜백함수 (callback)는 자바스크립트의 비동기 처리 방식의 문제점을 보안하기 위한 방법

 

비동기와 동기

동기는 무언가 실행을 해서 결과를 받기 까지 단 한개만을 실행 함 ( 장바구니에 1개를 담으면 1개를 담을 때까지 다음 상품을 담지 못함 ) -> 완료 전까지 다른 활동 수행 불가

비동기는 여러개를 실행 할 수 있음 ( 장바구니에 연속적으로 담아서 서버에 보낼 수 있음 ) -> 코드가 복잡함

 

자바스크립트에서 비동기로 주로 사용하기 때문에 이벤트 리스너를 사용할 경우 콜백 함수를 자주 사용한다

이런 콜백 함수를 우리는 프로미스로 대처한다

 

프로미스는 실행은 바로 하지만 결과값은 나중에 받는 객체이다

실행이 완료된 후 .then 이나 .catch 메서드로 결과값을 받는다.

 

1. 프로미스는 객체를 생성해야 사용할 수 있다

const condition = true; // true -> resolve false -> reject
const myPromise = new Promise((resolve, reject) => {
    if(condition){
        resolve('성공')
    }else{
        reject('실패')
    }
});
// 출력
myPromise
    .then((message) => {
        console.log(message)
    })
    .catch((er) => {
        console.log(er)
    })
    .finally(() =>{
        console.log('무조건실행')
    })

 

new Promise로 프로미스 객체를 생성하고

resolve 와 reject 를 매개변수로 갖는 콜백 함수를 넣는다.

이 프로미스 변수에 .then 과 .catch 메서드를 붙여 사용한다.

그리고 .finally은 무조건 실행된다.

 

then 이나 catch로 다시 다른 then이나 catch를 붙일 수 있고 이전의 then의 retyrn값을 다음 then의 매개변수로 넘긴다

// .then 을 붙여 사용해서 메시지를 내보낼 수 있음

myPromise.then((message) => {
    return new Promise((resolve, reject)=> {
        resolve(message);   // 성공
    })
    .then((message2) => {
        console.log(message2);
        return new Promise ((resolve, reject) => {
            resolve(message2)   // message를 이어받아서 그대로 입력됨 성공
        })
    })
    .then((message3) => {
        console.log(message3);  // then에서 new Promise 를 하지않아 받지 못함 값 없음
    })
    .catch((er)=>{
        console.log(er);
    })
})

 

 

콜백을 프로미스로 변경한 것

// 콜백을 프로미스로 바꿔보기 
// 콜백패턴 중 하나
function findAndSaveUser(Users) {
    Users.findOne({}, (err, user) => {   // 첫벗째콜백
        if(err) {
            return console.error(err);
        }
        user.name = 'zero';
        user.save((err) => {  //두번째콜백
            if(err) {
                return console.error(err);
            }
            Users.findOne({ gender : 'm'}, (err,user) => { //  세번째콜백
                // 생략
            })
        })
    })
}
// 세개의 콜백 함수가 있는데 콜백 함수가 나올 때마다 깊이가 깊어짐

// 프로미스로 변경
function findAndSaveUser(Users) {
    Users.findOne({}).then((user)=>{
        user.name = 'zero';
        return user.save();
    })
    .then((user)=>{
        return Users.findOne({gender : 'm'});
    })
    .then((user)=>{
        //생략
    })
    .catch(err =>{
        console.log(err);
    })
}

// 위의 예제는 findOne과 save 메서드에 내부적으로 프로미스 객체를 가지고 있다는 가정이다.

// 내부적으로 프로미스 객체를 가지지 않을 경우는 나중에 다시 보자

 

 

// promise.resolve로 즉시 resolve 하는 프로미스를 만들 수 있다.

// promise.resolve로 즉시 resolve 하는 프로미스를 만들 수 있다.
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
    .then((result)=>{
        console.log(result);    // ['성공1','성공2'];
    })
    .catch((error)=> {
        console.error(error);
    });

 

결과

 

반응형