async function / await

async function 함수이름( ) { }
const 함수이름 = async ( ) => { }

async function 선언은 Async Function 객체를 반환하는 하나의 비동기 함수를 정의한다.

비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다.

그러나 비동기 함수를 사용하는 코드의 구문과 구조는 표준 동기 함수를 사용하는 것과 많이 비슷하다.

 

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

// 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 후에 실행된다.`);

출력

SyntaxError: await is only valid in async function (await이 async function 안에서만 유효하다.)

이는 곧 await을 사용하는 경우, 항상 async 함수 안에서 사용되어야 한다는 것을 의미한다.

장점: 코드 로직이 밑으로 흘러가게 하기에 좋다.

// 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 후에 실행된다.`);
})();

 

Try catch

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

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

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

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

 

async function 자체로 사용하기

지금까지는 프로미스 객체를 new 생성자 함수를 통해서 생성하고 return 하는 함수를 사용하였따.

하지만 async function 자체로 사용하는 방법도 있다.

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

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

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

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

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

 

 

error의 전파

// error의 전파

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('reason'));
        }, 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

try catch문 이후에 항상 실행할 것을 지정

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('reason'));
        }, 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');
    }
})();

 

연속된 프로미스와 async await 처리방법

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

// Promsie

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 후에 실행');
})();

 

Promise.all과 Promise.race의 async await 처리방법

all은 인자가 모두 fulfilled되면 처리

race는 먼저 resolve되는 값이 있으면 그 값으로 처리

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

// Promsie.all

(aysnc function main() {
    const results = await Promise.all([p(1000), p(2000), p(3000)]);
    console.log(results);
})();
// 출력: (3초 후) [ 1000, 2000, 3000 ]


// Promise.race

(aysnc function main() {
    const results = await Promise.race([p(1000), p(2000), p(3000)]);
    console.log(results);
})();
// 출력: (1초 후) 1000