async & await

개요

• JavaScript 비동기 처리 패턴 중 가장 최근에 나온 문법 체계이다.
• CallBack 함수, Promise 의 단점을 개선하고 클린 코드를 작성할 수 있게 해준다.

클린코드

• 스스로 생각하기에 클린코드를 짜는 개발자가 정말 대단한 개발자라고 생각하고는 한다.
• 읽은 그대로, 이해한 그대로 코드를 구성하는 것이 async & await 문법의 탄생 목적이다.

var user = {
  id: 1,
  name: 'Josh'
};
if (user.id === 1) {
  console.log(user.name); // Josh
}


// HTTP 통신 코드 라고 가정하였을 시 해당 코드가 async & await 문법 적용 형태이다.
var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
  console.log(user.name);
}

---

기초

• async , await 는 키워드 이다.
• 기존의 JS 에서의 비동기 방식 관점에서 벗어난 기본적 사고를 요구한다.

// 비동기적으로 메서드를 호출하겠다는 의미인 듯
async function logName() {
			// 아마도 Response 가 올 때까지 대기하라는 키워드인 듯
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}


function logName() {
 
  var user = fetchUser('domain.com/users/1', function(user) {
  // 기존의 HTTP CallBack 이라면 CallBack 함수를 호출하여 후속 작업을 진행한다.
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

---

문법

•  async 키워드는 await 키워드가 붙은 함수를 가지고 있는 함수 앞에 기재 된다.
• await 키워드는 비동기 처리 메서드 앞에 기재한다.
• await 가 붙은 비동기 처리 메서드는 반드시 Promise 를 리턴해야한다.
• 보통 await 키워드가 붙은 비동기 처리 메서드는 Axios 같은 Promise 반환 함수 API 이다.

async function name() {
	await asyncFnc();
};

---

기초 예제

function fetchItems() {
	return new Promise( (resolve, reject) => {
    	const items = [1,2,3];
        resolve(items);
    });
}

async function logItems() {
	const resultItems = await fetchItems();
    console.log(resultItems);
}

---

async & await 의 실용 예제

• 글을 읽고 직접 짜본 함수는 밑과 같다.
• await 는 Promise 를 리턴하는데, await 가 걸리면 then() 이 생략된다.
• 디스트럭쳐링 으로 id 를 빼와 로깅한다.

function fetchUser() {
  const url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then((response) => {
    return response.json();
  });
}

function fetchTodo() {
  const url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then((response) => {
    return response.json();
  });
}

//fetchUser() 로 사용자 정보를 호출
//아이디가 1이면 할일 정보 호출
//받아온 할 일 정보의 제목을 출력
async function quiz() {
	const req = await fetchUser();
    const {id} = req;
    
    if(id === 1) {
    	console.log(req);
    }
}

---

async & await 의 예외처리

 

• async->await 에서 예외처리는 Java 에서 제공하던 try-catch 문이다.
• catch 문에 error 객체가 담겨져 오기 때문에 후속 처리에 적합하다.

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

 

---

참고

joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await