[JavaScript] Promise 사용해서 원하는 순서대로 코드 실행하기

 

Promise

 

원하는 코드 작동 후에,

결과에 따라서

원하는 순서대로 다음 코드를 실행하게 해주는 디자인 패턴

 

 

 

생긴거

/* eslint-disable */

export default () => {

    // promise 함수 선언
    const 더하기함수 = new Promise( (성공,실패) => {
        // 원하는 코드 작성
        if (1+1 === 2){
            성공();
        }else{
            실패();
        }
    });
    
    // promise 함수 실행
    더하기함수.then(() => {
        // 성공 시 실행
        console.log('성공');
    }).catch(() => {
        // 실패 시 실행
        console.log('실패');
    
    });

    return(
        <>
            <h1>PromiseCode</h1>
        </>
    )

}

 

이렇게 생겼습니다.

 

 

 

 

Promise 함수 선언

 

Promise 함수 안에 원하는 코드를 입력해봅시당

// promise 함수 선언
const 더하기함수 = new Promise( (성공,실패) => {
    // 원하는 코드 작성
    if (1+1 === 2){
        성공();
    }else{
        실패();
    }
});

 

저는 1+1= 2 라는 수식이 헷갈려서

1+1 이 2가 맞나 확인해주는 코드를 만들어봤어요!

 

1+1 이 2 이면 성공,

1+1 이 2가 아니면 실패 로 정해놨습니당

 

 

 

 

 

Promise 함수 사용하기

 

// promise 함수 실행
더하기함수.then(() => {
    // 성공 시 실행
    console.log('성공');
}).catch(() => {
    // 실패 시 실행
    console.log('실패');

});

 

Promise 가 성공했을 때

then() 안에 적은 함수가 실행되구요

 

Promise 가 실패했을 때

catch() 안에 적은 함수가 실행됩니다.

 

---

원하는 순서대로 코드를 실행하기

 

1+1 이 2인걸 알게 되어서 너무 기쁘네요

성공1 성공2 성공3 성공4 라는 문구를 순서대로 출력하고 싶어요!!😖

// promise 함수 실행
더하기함수.then(() => {
    console.log('성공1');
}).then(() => {
    console.log('성공2');
}).then(() => {
    console.log('성공3');
}).then(() => {
    console.log('성공4');
}).catch(() => {
    // 실패 시 실행
    console.log('실패');
});

이렇게 연달아 쓰면 됩니당

 

---

 

Promise 왜씀??

 

1. 콜백지옥같은거 없어서 유지보수가 편합니다.

콜백함수 기억나시나용

이렇게 생겼잖아요

이거 promise 로 쓰면 이렇게 됩니다.

 

2. catch 가 있습니다. 실패했을 때 실행할 함수를 지정할 수 있습니다.