[JS] async & await

ShinJuYong·2022년 3월 17일

공부한것들

목록 보기

11/33

async / await

async와 await는 ES8에 추가된 Javascript의 비동기 처리패턴이다.
기존 비동기 처리방식인 callback과 프로미스의 단점을 보완하고 개발자가 좀 더 읽기 좋은 코드를 만들수 있게 도와준다.

async / await 맛만보자

const logName() => {
	let user = fetchUser('url.com/user/1');
  // fetchUser()는 서버에서 데이터를 받아오는 http코드이다.
	if (user.id === 1) {
    	console.log(user.name);
    }
}

일반적으로 Javascript에서 비동기 처리 코드는 아래와 같이 콜백을 사용해야만, 실행 순서를 보장 받을수있엇다.
const logName() => {
	let user = fetchUser('url.com/user/1', (user) => {
      	if (user.id === 1) {
    	console.log(user.name);
    });
  // fetchUser()는 서버에서 데이터를 받아오는 http코드이다.
}

async/await를 사용한다면 아래와 같이 사용하면 구현이 가능해진다

async const logName() => {
	let user = await fetchUser('url.com/user/1');
  // fetchUser()는 서버에서 데이터를 받아오는 http코드이다.
	if (user.id === 1) {
    	console.log(user.name);
    }
}

async와 await의 기본 문법

async const 함수_이름 = () => {
	await 비동기_처리_할_메소드_이름();
}
먼저 함수 앞에 async예약어를 붙인다, 그다음 HTTP통신을 하는 비동기 처리 코드 앞에 await를 붙인다.
주의점 : 비동기 처리 코드는 반드시 프로미스 객체를반환해야 의도한대로 움직인다.
일반적으로, await의 대상이 되는 코드는 Axios등 프로미스를 반환하는 API호출 함
수이다.

async & await 간단한 예제

function fetchItems() {
	return new Promise(function(resolve, reject){
    	let items = [1,2,3];
      	resolve(items);
    }
}
                       
async function logItems() {
	let resultItems = await fetchItems();
    console.log(resultItems); // [1,2,3]
}

만약 async await를 사용하지 않는다면 콜백함수같은걸 이용해야지 데이터를 받아온 시점에서 출력하게 만들수있다,
하지만 async await를 사용함으로써 비동기처리를 더 간단명료하게 할수있다.

async & await 활용 예제

async await를 가장 활용하기 좋은 코드는 API를 호출하는 코드이다.

function fetchUser(){
	let url = "https://someurl.things.com/user/1"
    return fetch(url).then(function(response){
    	return response.json();
    });
}
function fetchTodo(){
	let url = "https://someurl.things.com/todo/1"
    return fetch(url).then(function(response){
    	return response.json();
    });
}

위 함수를 실행하게 되면 사용자와 할일이 담긴 Promise가 반환된다.

실험을 해볼 예제의 로직을 짜보자

fetchUser()를 호출해서 사용자를 불러온다
받아온 사용자의 id값이 1이면 할일을 호출
받아온 할일제목을 출력

async function logTodoTitle(){
	let user = await fetchUser();
    if (user.id === 1) {
    	let todo = await fetchTodo();
      	console.log(todo.title);
    }
}

async & await의 예외를 처리해보자

promise에선 .catch()를 사용하는것처럼 async에선 catch {}를 사용한다.
위의 코드에서 바로 적용해보자.
async function logTodoTitle(){
  try{
	let user = await fetchUser();
    if (user.id === 1) {
    	let todo = await fetchTodo();
      	console.log(todo.title);
    }
  } catch (error) {
  	console.log(error);
  }
}
위 코드를 실행하게 되면 거의 모든 오류를 catch로 잡아내게 된다. 즉, 발견된 에러는 error객체에 담기므로 유형에 맞게 처리하면된다.