async, await

지인혁·2023년 10월 15일
0
post-custom-banner


async, await

ansyc, awiat은 Promise 함수를 동기 코드처럼 보이게 작성할 수 있다. 실행은 여전히 비동기로 실행된다. Promise의 then보다 가독성을 높여주는 방법이다.

Promise then과 가독성을 비교해보면 훨씬 코드를 읽기 좋다.

const promise1 = () => {
  return new Promise((resove, reject) => {
    const result = "work1";
    
   	resolve(result); 
}) 
// Promise 사용
promise1()
  	.then((result) => {
  		console.log(result);
  		return prmise1(result);
	})
  	.then((result) => {
		console.log(result);
	})
  
// async, await 사용
async function work() {
	const result1 = await promise1();

    console.log(result1);

    const result2 = await promise1();

	console.log(result2);
}
work();

async, await 사용 방법

async 키워드는 함수 앞에 위치하며, async로 선언한 함수는 실행 결과를 반드시 Promise로 감싸여 반환하게 된다. return 문구는 resolve()와 동일하다.

await은 반드시 async함수 내에서 사용해야 동작한다. await을 만나면 해당 비동기 함수를 기다리게 되며 자바스크립트는 다른 동작을 수행하게 된다.

async function asyncRun() {
	return "hello"; 
}

asyncRun(); // Promise {<fulfilled>: "hello}

이렇게 반환된 Promise 객체에서 원래의 값을 얻으려면 .then() 메소드를 사용하거나 또 다른 async 함수 내에서 await 키워드를 사용해야 한다.

async function asyncRun() {
	return "hello"; 
}

async function foo() {
 	const result = await asyncRun();
  
  	console.log(result); // "hello"
}

asyncRun().then((result) => console.log(result)); // "hello"

예외 처리

await, asnyc를 사용할때 에러처리는 try, catch문을 사용하면 된다. catch문은 Pormist의 catch문과 비슷한 역할을 하며 오류가 발생하면 catch문이 실행된다.

async function fetch() {
  try{
	const data = await request("www.naver.com");

    console.log(data);
  }
  catch(error){
    console.log(error);
  }
}
fetch();

profile
대구 사나이
post-custom-banner

0개의 댓글