promise, async, await

promise, async, await의 기본 문법이 헷갈려 정리하기 위하여 포스팅합니다.

callback

$("buttom").click(() => {
  alert("btn clicked!!");
});

버튼을 클릭하고 난 다음, 콜백함수로 경고창을 띄우는 모습
어떤 함수가 실행하고 다음함수를 실행함으로써 일련적인 flow 형성
콜백지옥에 빠질 수 있습니다.

callback hell

A((a) => {
    B(a,(b) => {
        C(b,(c) => {
            console.log("callback hell")
        })
    })
})

promise

콜백지옥을 탈출하는 새로운 문법

promise의 3가지 상태

• pending (대기)
• pullfilled (이행)
• rejected (실패)

function sayHello() {
    return new Promise(resolve, reject) => {
        
    }
}

sayHello 함수 실행 뒤에 어떤 테스크로 진행될지 resolve와 reject로 구분지어줍니다. 성공했을 때는 resolve를 호출, 실패했을 때는 reject를 호출합니다.

성공한 경우

function sayHello() {
    return new Promise((resolve, reject) => {
        const hello = "Hello Hello";
        resolve(hello);
    });
}

sayHello().then((resolvedData) => {
    console.log(resolvedData) // Hello Hello
});

실패한 경우 (에러핸들링)

function sayHello() {
    return new Promise((resolve, reject) => {
        const hello = "Hello Hello";
        reject(new Error());
    });
}

sayHello().then((resolvedData) => {
    console.log(resolvedData)
}).catch((error) => {
    console.log(error); // Error
})

reject를 호출했을때 catch가 실행이 되고 error를 출력합니다.

연속적인 then 호출

서버 개발 시 회원가입 할 때, 로그인 시 사용자가 회원이 맞는지 database 조회, 문자열 검사 등의 흐름들을 then을 이용해서 합니다.

function sayHello() {
    return new Promise((resolve, reject) => {
        resolve("hello!!!");
    });
}

sayHello().then((resolvedData) => {
    console.log(resolvedData)
    return resolvedData;
})
.then((resolvedData) => {
    console.log(resolvedData);
    return resolvedData;
})
.then((resolvedData) => {
    console.log(resolvedData);
})
.catch((error) => {
    console.log(error);
})

이런 then보다 더 간단한 문법이

async, await

function sayHello() {
    return new Promise((resolve, reject) => {
        resolve("hello!!!");
    });
}

async function test() {
    const hello1 = await sayHello();
    console.log(hello1); // hello!!!
}

test(); 

sayHello의 리턴값을 hello1에 저장하고, hello1을 콘솔에 찍게되는 일반적인 코드 작성 규칙을 따릅니다.

promise 자체가 비동기이므로, sayHello의 실행이 끝나고 밑의 코드를 실행시키겠다는 뜻의 await 입니다.
await을 쓰기 위해서는 함수 앞단에 async를 써줘야합니다.
.then보다 좀 더 익숙한 코드로 작성할 수 있다는 장점이 있습니다.