[javascript] async await 비동기에 대해서

 

 

 

 

1. async 

함수 앞에 async를 붙이면 해당함수는 자동으로 프로미스를 반환하게 된다. 

비동기로 처리되는 부분에 await를 붙이면 프로미스가 끝날때까지 기다린다. (동기적 처리)

await는 async가 붙은 함수에서만 사용 가능하다. 

 

2.await

비동기로 처리되던 것을 동기적으로 처리를 해준다. 

async function Name(){
	return "kim"
}

async function Job(){
	return "Front-end Developer"
}

async function Info(){
	const name = await Name();
    const Job = await Job();
    return `${name} + ${Job}`
}

Info().then(console.log);

//결과값
kim + Front-end Developer

 

function delay() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(), 2000);
    })
}

async function getApple() {
    await delay();
    return "apple";
}

async function getBanana() {
    await delay();
    return "banana";
}

async function getFruites() {
    let a = await getApple(); // 리턴값이 promise의 resolve()이므로 대입 가능
    let b = await getBanana(); // getApple()이 처리되고 getBanana()가 처리됩니다.
    console.log(`${a} and ${b}`);
}

getFruites(); // 결과 : apple and banana

 

 

 

await는 최상위 레벨 코드에서 작동하지 않습니다. 

// 최상위 레벨 코드에선 문법 에러가 발생함
let response = await fetch('/api..');
let user = await response.json();

3.Promise

Promise는 비동기 작업의 단위이다. 

const promise = new Promise((resolve, reject) => {
	//비동기 작업을 수행한다. 
    
    if(비동기 작업 수행성공){
    	resolve('result');
    }else{
    	reject('failure reason');
    }
});

 

promise 는 new 연산자와 함께 호출하여 생성한다. 

비동기 처리를 수행할 콜백함수를 인수로 전달 받는데, 

resolve와 reject를 함수로 전달 받는다. 

비동기가 성공하면 resolve를 호출하고, 실패하면 reject를 호출하게 된다. 

프로미스의 상태 정보	의미	상태 변경 조건
pending	비동기 처리가 아직 수행되지 않은 상태	프로미스가 생성된 직후 기본 상태
fulfilled	비동기 처리가 수행된 상태(성공)	resolve함수 호출
rejected	비동기 처리가 수행된 상태(실패)	reject함수 호출