JavaScript Async - Await

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

 

async function - JavaScript | MDN

형태

 

// Promise 객체를 리턴하는 함수

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
        },ms);
    });
}

// Promise 객체를 이용해서 비동기 로직을 수행할 때

p(1000).then((ms) => {
    console.log(`${ms} ms 후에 실행된다.`);
});

// Promise 객체를 리턴하는 함수를 await 로 호출하는 방법

const ms = await p(1000);
console.log(`${ms} ms 후에 실행된다.`);

결과

이러한 에러가 발생하는데 아래에서 해결한다

async function안에 없어서 이런 에러가 발생한 것이다.

 

// await 를 사용하는 경우, 항상 async 함수 안에서 사용되어야 한다.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
        },ms);
    });
}

(async function main() {
    const ms = await p(1000);
    console.log(`${ms} ms 후에 실행된다.`);
})();

결과

1000ms후에 실행됨

// Promise 객체가 rejected 된 경우의 처리를 위해
// try catch 를 이용한다.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve(ms);
            reject(new Error('reason1'));
        },ms);
    });
}

(async function main() {
    try {
        const ms = await p(1000);    
        //
    } catch (error) {
        console.log(error);
    }
    
})();

결과

1000ms후에 실행됨

// async function 에서 return 되는 값은
// Promise.resolbe 함수로 감싸서 리턴된다.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve(ms);
            reject(new Error('reason1'));
        },ms);
    });
}

async function asyncP() {
    return 'Mark';
}

(async function main() {
    try {
        const name = await asyncP();
        console.log(name);   
    } catch (error) {
        console.log(error);
    }
    
})();

결과

// async function 에서 return 되는 값은
// Promise.resolve 함수로 감싸서 리턴된다.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
             resolve(ms);
            //reject(new Error('reason1'));
        },ms);
    });
}

async function asyncP() {
    const ms = await p(1000);
    return 'Mark';
}

(async function main() {
    try {
        const name = await asyncP();
        console.log(name);   
    } catch (error) {
        console.log(error);
    }
    
})();

결과

1000ms 후에 출력된다

// error의 전파

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve(ms);
            reject(new Error('reason1'));
        },ms);
    });
}

async function asyncP() {
    const ms = await p(1000);
    return 'Mark';
}

(async function main() {
    try {
        const name = await asyncP();
        console.log(name);   
    } catch (error) {
        console.log(error);
    }
    
})();

결과

1000ms 후에 에러 출력됨

// finally

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve(ms);
            reject(new Error('reason1'));
        },ms);
    });
}

async function asyncP() {
    const ms = await p(1000);
    return 'Mark';
}

(async function main() {
    try {
        const name = await asyncP();
        console.log(name);   
    } catch (error) {
        console.log(error);
    } finally {
        console.log('end');
    }
})();

결과

1000 ms후에 에러메시지와 finally 안의 end까지 출력된다

// finally

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            // reject(new Error('reason1'));
        },ms);
    });
}

async function asyncP() {
    const ms = await p(1000);
    return 'Mark : ' + ms;
}

(async function main() {
    try {
        const name = await asyncP();
        console.log(name);   
    } catch (error) {
        console.log(error);
    } finally {
        console.log('end');
    }
})();

결과

1000ms 후에 결과와 finally안의 end까지 출력됨

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            // reject(new Error('reason1'));
        },ms);
    });
}

// Promise
p(1000).then(() => p(1000)).then(p(1000)).then(() => {
    console.log('3000 ms 후에 실행 ');
});

//async await

(async function main() {
    await p(1000);
    await p(1000);
    await p(1000);
    console.log('3000 ms 후에 실행 ');
})();

결과

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
        },ms);
    });
}

//Promise.all

(async function main() {
    const results = await Promise.all([p(1000), p(2000), p(3000)]);
    console.log(results);
})();

결과

3000ms후에 나온다

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
        },ms);
    });
}

//Promise.all

// (async function main() {
//     const results = await Promise.all([p(1000), p(2000), p(3000)]);
//     console.log(results);
// })();

//Promise.race

(async function main() {
    const results = await Promise.race([p(1000), p(2000), p(3000)]);
    console.log(results);
})();

결과

1000ms후에 나온다

 

참고용 블로그 : m.blog.naver.com/PostView.nhn?blogId=horajjan&logNo=220607005143&proxyReferer=https:%2F%2Fwww.google.com%2F

[자바스크립트] Promise.all과 Promise.race 사용하기