가자미의 개발이야기

[JS] 많은 콜백함수를 정리하는 promise 본문

HTML & CSS & JS/JS

[JS] 많은 콜백함수를 정리하는 promise

가자미 2021. 3. 17. 19:35

promise : 특정 콜백을 조건에 따라 성공/실패로 나눠주는 역할.

resolve : 성공했을 경우에 성공 결과를 반환하는 메소드

reject : 실패했을 경우에 에러를 반환하는 메소드

then : promise 인스턴스가 성공적으로 실행하고 나서 다음에 할 행동을 콜백으로 실행

catch : promise 인스턴스가 오류를 일으킬 경우 처리할 행동을 실행

//비동기 작업 다루기 promise
//많은 콜백함수를 정리할 때 사용
const myPromise = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve('result');//성공하는 상황에서는 resolve
    }, 1000)
    setTimeout(()=>{
        reject(new Error());//실패하는 상황에서는 reject
    })
});

myPromise.then(result=>{//promise이후 할 행동then
    console.log(result);
}).catch(e=>{//에러를 잡는 catch
    console.error(e);
});
//함수로 promise사용
function increaseAndPrint(n){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            const value = n+1;
            if(value===5){
                const error = new Error();
                error.name = 'valueisfiveerror';
                reject(error);
                return;
            }
            console.log(value);
            resolve(value);
        },1000)
    });
}

increaseAndPrint(0, then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.catch(e=>{
    console.error(e);
}));

'HTML & CSS & JS > JS' 카테고리의 다른 글

[JS] promise.all 과 promise.race  (0) 2021.03.17
[JS] async 와 await  (0) 2021.03.17
[JS] 비동기 작업을 다루는 setTimeout()  (0) 2021.03.17
[JS] spread, rest  (0) 2021.03.17
[JS] 비구조할당  (0) 2021.03.17