async / await

 async, await은 비동기를 다루지만, 프로미스와는 다른 사용법을 가지고 있고 프로미스를 이용한다.

function myFunc() {
    
}

async function myAsync() {
    
}

console.log(myFunc);
console.log(myAsync);

모양이 특이한 것을 볼 수 있다.

 

호출을 해보자.

 

function myFunc() {
    return 'func';
}

async function myAsync() {
    return 'async';
}

console.log(myFunc());
console.log(myAsync());

promise가 나온다.

 

function delayP(sec) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(new Date().toISOString());
        }, sec * 1000);
    });
}


function myFunc() {
    return 'func';
}

async function myAsync() {
    return 'async';
}

console.log(myFunc());
console.log(myAsync());
console.log(delayP(3));

그렇다는 것은 then 을 쓸 수 있다는 뜻이 된다.

 

async function myAsync() {
    return 'async';
}

myAsync().then((result) => {
   // then의 리턴값이 곧 다음 프로미스의 결과값으로 넘어가듯이,
    // async 함수 내에서 리턴하는 값은 promise의 return으로 들어온다.
    console.log(result);
});

---

Await?

 

await은 뭔가를 기다리는 것.

promise가 resolve 되어서 결과값이 넘어올 때까지 기다리는 것.

 

function delayP(sec) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(new Date().toISOString());
        }, sec * 1000);
    });
}


function myFunc() {
    return 'func';
}

async function myAsync() {
    delayP(3).then((time) => {
        console.log(time);
    })
    return 'async';
}

 

async는 비동기이므로,

async가 찍힌 뒤, 3초 뒤에 날짜가 찍힌다.

 

 

3초를 기다리게 한 뒤에 return을 하고 싶을 때 어떻게 해야할까?

 

async 함수이기 때문에 await를 쓸 수 있다.

await를 써주면, promise가 resolve 될 때까지 await 다음 줄로 넘어가지 못한다.

 

async function myAsync() {
    await delayP(3);
    return 'async';
}

myAsync().then((result) => {
    console.log(result);
});

 

// (3초 뒤에) async

 

await를 변수에 담으면, 일반함수의 리턴 값을 받듯이 쓸 수 있다.

 

async function myAsync() {
    const time = await delayP(3);
    console.log(time);
    return 'async';
}

myAsync().then((result) => {
    console.log(result);
});