[ Javascript ] Promise - 비동기 패턴 객체 사용

Promise - 비동기 패턴 객체 사용

1. 비동기 패턴

1-1. 콜백함수

callback 함수는 a라는 로직 이후에 실행 되는 로직을 말한다.

• 함수의 인수로 사용되는 함수를 콜백함수
• 실행 순서 보장

function a(callback){  // 1. 함수 
    setTimeout(()=>{
        console.log("a");
        callback()  // 2. 콜백함수의 실행 위치 
    },1000)

}
function b() {
    console.log("b")
}

a (function (){   // 3. 콜백함수 = a 함수의 인수로 사용되는  function 함수 
    b()
});

 

1-2. 콜백지옥 (연이은 콜백함수의 사용)

• 순차적으로 콜백함수를 사용할때 > 이와 같은 모양이 나타나게 된다.
• 다음 순서를 보장은 하지만 관리가 힘듬
• 사용패턴이 불편

function a(callback){
    setTimeout(()=>{
        console.log("a");
        callback()
    },1000)
}

function b(callback) {
    setTimeout(() => {
        console.log("b");
        callback()
    }, 1000)
}

function c(callback) { //// a 로직과 동일한 콜백함수들 
    ... 
}

function d(callback) { // a 로직과 동일한 콜백함수들 
  ...
}
// 순차적 적용
a(function(){
    b(function(){
        c(function () {
            d(function () {
                console.log('Done!')
            })
        })
    })
})

 

 

 

 

2. Promise객체

콜백함수의 대채로 사용할 수 있는 실행순서를 보장하는 객체

2-1. async · await 사용

ES8 버전에서 나온 신 기술이다.

• Promise 객체 생성 : new Promise 함수 내부에서 객체를 생성하여 사용한다.
• 매개변수 : Promise객체에 매개변수로 resolve 를 넘겨주어 콜백과 동일한 역할을 한다.
• 실행위치 및 매개변수 전달 : resolve() 매개변수도 함께 넘겨줄수 있다.
• 이후 실행되는 함수 : 함수 앞에 async 를 붙혀준다.
• 먼저 사용되는 함수 선언 : await 사용, await a() a 함수 내부의 resolve 매개 변수가 실행될때까지 기다리고 다음 코드로 넘어간다.

function a(){
    //약속의 객체 생성
    return new Promise(function (resolve) {  // resolve 콜백과 동일한 역할
        setTimeout(function(){
            console.log('A');
            //resolve();
              resolve('hello a'); // 특정 내용을 해당 위치에서 실행 보장
        },1000);

    });
}
function b() {
    console.log("b")
}

async function test(){
    const txt = await a(); // resolve매개 변수가 실행될때까지 기다리고 다음 코드로 넘어간다.
    console.log(txt)
    b()
}
test();

 

2-2. async · await 예외처리 - try · catch

• Promise 객체의 매개변수 : resolve가 다음 실행될 콜백함수라면 reject 는 정상적으로 호출될 수 없을때 사용한다.
• 함수 정상 호출이 불가능 할때 : reject()를 실행하면 resolve로직이 실행되지 않는다. 해당 함수의 내부 로직도 실행을 막으려면 return 이 필요하다.
• 이후 실행되는 함수 : try , catch , finally 로직을 사용해 에러가 났을때 실행되어야할 로직을 추가할 수 있다.

function a(number){
    return new Promise((resolve, reject) => { //reject 정상적으로 호출될 수 없을때 사용
        if(number > 4){
            reject() // resolve 로직 실행되지 않는다.
            return; // 이후 로직이 실행되지 않도록
        }
        setTimeout(()=>{
            console.log('a');
            resolve();
        },1000)
    });
}



async function test(){
    try{
        await a(8); // javscript 에러
        console.log("resolve")
    }catch(error){ // 에러 내용
        console.log("error")
    }finally{
        console.log("finally")
    }



}test();

 

2-3. 2017 (ES8) 이전 버전 대채 사용, Promise객체 메서드

• 이후 로직 : then() 사용하여 채이닝 하여 순차적으로 처리 가능하다.

function a(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('a');
            resolve();
        },1000)
    });
}
function b() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('b');
            resolve();
        }, 1000)
    });
}
function c() {
    ....
}


function test(){
    a().then(() => {
        return b();
    }).then(()=>{
        return c();
    }).then(()=>{
        console.log("마지막");
    })
}test();

 

2-4. Promise객체 메서드 예외처리

• 거부되었을때 : .catch(()=> ) 를 사용하여 로직 처리
• 거부 여부와 상관없이 : .finally(()=> ) 를 사용하여 로직 처리

function a(number){
return new Promise((resolve, reject) => { //reject 정상적으로 호출될 수 없을때 사용
if(number > 4){
reject() // resolve 로직 실행되지 않는다.
return; // 이후 로직이 실행되지 않도록
}
setTimeout(()=>{
console.log('a');
resolve();
},1000)
});
}

function test(){
a(5)
.then(()=>{ // 처리 후 실행
console.log('resolve')
})
.catch(()=>{ // 거부 되었을때
console.log('reject')
}).finally(()=>{ // 거부 여부와 상관없이 실행
console.log('finally')
})
}test();