Promise

promise 는 비동기 함수로 바꿔줄 수 있다.

 

promise 객체는 3가지 상태값을 가지게 되는데,

<pending>  = 값이 아직 없는 상태

<fullfilled>   = 값이 가득 찬 상태

<reject>      =  실패 값이 찬 상태 

 

 

한 번 상태가 변경 된 프로미스 객체는 다시 값을 부여 할 수 없다.

const 아반떼 = (callback) => {
    setTimeout((a) => {
        console.log("아반떼 go");
        callback();
    }, 3000);
};

const 소나타 = (callback) => {
    setTimeout(() => {
        console.log("소나타 go");
        callback();
    }, 2000);
};

const 제네시스 = (callback) => {
    setTimeout(() => {
        console.log("제네시스 go");
        callback();
    }, 1000);
};

아반떼(() => {
    아반떼(() => {
        제네시스(() => {
            소나타(() => {
                아반떼(() => {
                    소나타(() => {
                        console.log("hell");
                    });
                });
            });
        });
    });
});

비동기 함수를 콜백으로 실행하면 콜백지옥에 빠지게 된다.

const pr = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("OK");
    }, 3000);
});

pr.then((data) => {
    console.log(data);
});

const 아반떼 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("아반떼 race");
        }, 3000);
    });
};

아반떼()
    .then((a) => {
        console.log(a);
        return 아반떼();
    })

new promise 를 통해 새로운 promise 객체를 생성해준다.

promise객체는 비동기 함수가 완료되었을 때 resolve 값을,

실패했을 때 reject 값을 받아주는 함수이다.  >> 실패도 우리가 넣어주는 값이다.

 

현 예제에선 아반떼는 return 값으로 promise 객체를 받았다. 

 

이 promise는 비동기 함수 settimeout 을 가지고 있다. settimeout 실행이 성공적으로 완료가 된다면 Promise 객체는 resolve 값을 받게 된다.

이 때 Promise가 성공적으로 값을 받게 된다면 Promise는 fullfilled 상태가 된다. (값을 받지 않은 상태면 pending, 실패는 rejected)

 

fullfilled 상태가 되면 값을 받은 상태기 때문에 .then()을 이용해서 값을 호출 할 수 있다.

---

async / await

 

async 와 await 는 promise를 더욱 쉽게 사용할 수 있게 해준다

async를 함수 앞에 붙여놓게 되면 해당 함수는 항상 promise 를 반환하게 된다. 

또한 async를 사용하면 await를 사용 할 수 있게 된다.  (실상 async 의 경우 await을 사용하기 위한 제물에 가깝다.)

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("완료!"), 1000);
    });

    let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

    console.log(result); // "완료!"
}

f();

await 을 사용하면 promise 함수가 처리될 때 까지 기다리게 된다. promise가 처리되면 그 다음 문항부터 다시 실행이 되기 때문에 비동기 함수라도 값을 받아서 실행할 수 있는 형태가 될 수 있다.