Promise

Promise

 

 

▶ 비동기 처리에 사용되는 객체이며 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

 

 

▶ executor는 promise의 자체 내장함수이며 함수를 적는 공간이라고 생각하면 된다. resolve, reject 중 하나는 반드시 호출해야 한다.

 

 

▶ 아래처럼 사용하면 되며 인자가 resolve, reject인 콜백 함수를 선언하면 된다.

 

new Promise(function(resolve, reject) { 
    // executor
});

 

 

▶ resolve(value) => promise가 정상적으로 이행된다면 resolve의 value를 반환한다.

 

new Promise(function(resolve, reject) {
    // executor
    // executor에 작성된 코드는 promise가 만들어지면 따로 호출코드를 작성하지 않아도 자동으로 실행됨
    setTimeout(() => resolve('실행완료'), 2000);
});

 

 

▶ reject(error) => promise가 거부될 경우 에러 객체를 나타내는 error를 반환한다.

 

new Promise(function(resolve, reject) {
    // executor
    setTimeout(() => reject(new Error('에러')), 2000);  // Error: 에러
});

 

 

 

Then

 

 

▶ executor의 결과나 에러를 받아서 출력해주는 역할을 한다. promise가 이행된다면 첫 번째 줄의 함수가 실행되며, 거부된다면 두 번째 줄의 함수가 실행됩니다.

 

// promise가 이행됨
function test1() {
    return new Promise(function(resolve, reject) {
        resolve('결과');
    })
};

test1().then(
    // 1번째 줄
    function() {
        console.log('결과가 나왔습니다.');
    },

    // 2번째 줄
    function() {
        console.log('문제가 발생했습니다.');
    }
);

// 결과가 나왔습니다.



// promise가 거부됨
function test2() {
    return new Promise(function(resolve, reject) {
        reject(new Error('error'));
    })
};

test2().then(
    // 1번째 줄
    function() {
        console.log('결과가 나왔습니다.');
    },

    // 2번째 줄
    function() {
        console.log('문제가 발생했습니다.');
    }
);

// 문제가 발생했습니다.

 

 

 

Catch

 

 

▶ 에러가 발생한 경우 실행된다.

 

 

▶ then의 두번째 줄 함수와 하는 역할이 같으나 catch를 사용하기를 권장한다.

 

function test() {
    return new Promise(function(resolve, reject) {
        reject(new Error('error'));
    })
};

test().then(
    function() {
        console.log('결과가 나왔습니다.');
    }
)
.catch(
    function(error) {
        console.log(error.name);
});

// error

 

 

 

Promise Chaining

 

 

▶ promise를 연결한다는 의미이다.

 

 

▶ 아래의 코드처럼 promise를 연계시킬 수 있다.

 

function one() {
    return new Promise(function(resolve) {
        resolve(8);
    })
};


function two(second) {
    return new Promise(function(resolve) {
        resolve(second * 3);
    })
};


function three(third) {
    return new Promise(function(resolve) {
        resolve(`정답은 ${third * 6} 입니다.`);
    })
};


one()
.then(
    function(first) {  // 8이 first가 됨
        return two(first);  // first를 two함수의 인자(second)로 넣고 two함수 실행
    }
)

.then(
    function(second) {  // 24가 second가 됨
        return three(second);  // second를 three함수의 인자(third)로 넣고 three함수 실행
    }
)

.then(
    function(third) {  // third가 144가 됨
        console.log(third);  // 144
    }
);