[JavaScript] async/await, for-await-of

Narcoker·2023년 6월 16일
0

JavaScript

목록 보기
44/55

async/await

비동기 함수를 동기적으로 작동할 수 있도록 하는 키워드

정확히 말하자면 async 가 키워드가 아니라 async function 이 키워드이다.

원래 비동기 함수는 모든 동기 코드가 실행된 이후에 실행이 된다.
하지만 async/await 을 사용하면 비동기 함수를 즉시 실행하고
실행이 완료될 때까지 다음 동기 코드는 기다린다.

function create(param){
	return new Promis((resolve)) => {
    	resolve(param);
    });
};
async function getPoint(option) {
	const value= await create(option);
    console.log(value);
};
getPoint({point: 100});

async 함수

비동기 함수를 뜻하며 AsyncFunction 오브젝트를 생성하여 반환한다.
async 함수가 호출되면 Promise 인스턴스를 반환한다.

asyncreturn 값을 처리하려면 then()을 함수 호출에 연결하여 작성한다.

async 함수에서 throw가 발생하면 reject() 로 처리된다.

async function sports(){
	return "축구";
};
sports().then((res) => console.log(res));
console.log("먼저 실행");
/*
여기먼저
축구
*/

await

반드시 AsyncFunction 내부에서만 사용해야한다.

await 뒤에 붙은 표현식이 Promise 오브젝트이면 resolve()의 파라미터 값을 반환한다.
표현식이 Promise 오브젝트가 아니면 평가값을 반환한다.

function create(param){
	return new Promise((resolve) => {
    	resolve(param);
    });
 };

 async function getPoint(option){
 	const value = await create(option);
    console.log(value); // {point: 100}
};
getPoint({point: 100});

Promise 에서 reject() 가 발생했을 때 에러에 대처하는 형태

try-catch

function create(param){
	return new Promise((resolve) => {
    	reject(param);
    });
 };

async function getPoint(option){
	try{
    	await create(option);
    } catch(error){ // reject의 param이 error에 할당된다.
    	console.log(error);
    };
};
getPoint({point: 100}); // {point: 100}

catch() 를 사용한 형태

function create(param){
	return new Promise((resolve) => {
    	reject(param); // 에러 발생
    });
 };

async function getPoint(option){
	await create(option).catch(value => {
		return 300; // Promise.reject 객체 반환 
    }).then((param) => { // Promise.reject 객체에 대한 then
    	console.log(param); 
    });
};
getPoint({point: 100}); // 300

for-await-of

AsyncFunction 에서 사용할 수 있다.
일반적으로 비동기 반복에서 사용한다.

async function* point(){
	yield 10;
    yield 20;
};
async function show(){
	for await (const value of point()){ // Promise 인스턴스 반환
    	console.log(value);
    }
};
show(); 
/*
10
20
*/

[[JavaScript] Well-Known Symbols - Symbol.asyncIterator()]

profile
열정, 끈기, 집념의 Frontend Developer

0개의 댓글