[javascript] Promise

Promise

promise 개념

  • 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 하는 오브젝트
  • 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행이 되었다면 성공의 메시지와 함께 처리된 결과값을 전달 해줌
  • 만약 기능을 수행하다가 오류가 나면 에러를 전달 해줌
  • ex) 아직 완성 되지 않은 A라는 제품을 펀딩
  • 제품을 펀딩한다.
  • 제품이 완성될 때 까지 기다린다.
  • 제품을 받는다.
  • ex) 이미 완성된 위의 제품 A를 구매
  • 제품을 구매한다.
  • 제품을 받는다.
  • 위와 같은 과정이 promise
  • State: pending -> fulfiled or rejected
  • Producer vs Consumer

promise 생성/사용

  • 새로운 promise 객체를 만들면 함께 선언한 excuter 함수가 동시에 실행 된다.
  • Promise 객체
  • resolve -> 성공시 처리
  • reject -> 실패시 처리
  • Promise 객체 실행 시
  • then: promise의 resolve 실행
  • catch: promise의 reject 실행
  • finally: 무조건 실행
class User {
    constructor(id, pw){
        this.id = id;
        this.pw = pw;
    }

    doShowList(list) { //배열 리스트를 건네주면 출력하는 함수
        list.forEach(element => {
            console.log(element);
        });
    }

    doSignin(list, id, pw){ 
        //promise를 사용하여 코드 간소화
        return new Promise((resolve, reject) => {
            const flag = list.some(user => {
                //배열 클래스 함수인 some은 조건에 따른 true/false 를 반환
                return user.id === id && user.pw === pw;
            });
            if(flag){ //성공하면 resolve
                resolve(id);
            } else { //실패하면 reject
                reject('id or pw is not correct');
            }
        })
    }

    moveToMain(){ //로그인 성공시 호출되는 함수
        console.log('main page');
    }

}

const userList = [ //회원명부
    new User('woogie1', '123'),
    new User('woogie2', '456'),
    new User('woogie3', '789')
];

const user = new User();

const id = prompt('id');
const pw = prompt('pw');

user.doSignin(userList, id, pw)
    .then(id => { //id <- resolve에서 받아온 파라미터
        console.log(`Welcome ${id}`);
        user.moveToMain();
    })
    .catch(error => { //error <- reject에서 받아온 파라미터
        alert(error);
    })
    .finally(console.log('process over'))
;

Promise.all

const [productListRes, productTypeRes] = await Promise.all([
  commonCodeService.getTaskAdditionalInfo(productGroupReq),
  commonCodeService.getTaskAdditionalInfo(productTypeReq),
]);

links

social