#기본기10_async / await

 

asycn  /  await를 사용하면 프라미스를 편하게 사용할 수 있다.

 

함수에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.

프라미스가 아닌 값을 반환하더라도 이행상태(resolved promise)로 값을 감싸

이행된(성공한) 프라미스가 반환되도록 한다.

// 일반 함수에서 async 작성법, function 앞에 작성한다
async function test() {
	return 7;
}
// 화살표 함수에서 async 작성법, 인수(Parameter)앞에 async를 작성한다.
const test = async() => {
	return 7;
}

 

await와의 활용

 

await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만듭니다.

프라미스가 처리되면 그 결과와 함께 실행이 재개되죠.

프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에

CPU 리소스가 낭비되지 않습니다. (https://ko.javascript.info/async-await)

async function foo() {
  let promise = new Promise((resolve, reject) => {
  	setTimeout(() => resolve("1초뒤나옴"), 1000)
  });
  
  let result = await promise; // 프라미스가 이행될 때까지 기다림
  alert(result) // 1초뒤나옴
}

foo();

 

클래스 메서드에서도 async / await 를 사용할 수 있다

class Person{
	async name(){
    	return await Promise.resolve("bin");
    }
}

new Person()
	.name()
    .then(alert); // bin

 

에러처리는 일반적으로 try..catch문을 사용한다

async function foo(){
	try{
    	const reponse = await fetch("http://자고싶어라")
        const result = await response.json();
        console.log(result)
    } catch(error){
    	console.log(error) // 에러 처리
    }
}

 

다음시간엔 fetch()에 대해 알아보자..

 

출처 : 자바스크립트인포, gpt