Async/Await를 사용하여 ES6 Fetch 리팩토링

ES6 가져오기

잠시 동안 Javascript를 사용해 왔거나 Javascript에서 비동기 함수의 기초를 배우는 초보자이든 간에, URI에서 데이터를 검색하기 위해 ES6Fetch API을 사용했을 가능성이 큽니다. 다음은 fetch()를 사용하여 Github API에서 사용자 정보를 가져오는 예입니다.

const getUser = name => {
 fetch(`https://api.github.com/users/${name}`)
  .then(response => response.json())
  .then(data => console.log(data))
};

//get user data
getUser('yourUsernameHere');

위의 코드는 나쁘지 않습니다. 상당히 읽기 쉽고 올바르게 작동합니다. 그러나 fetch 함수를 해결하기 위한 콜백 함수를 지원하는 .then() 함수에 주목하십시오. 더 많은 .then() 를 연결하기 시작하면 코드를 읽기가 점점 더 어려워질 것이라고 상상할 수 있습니다. 이는 종종 "콜백 지옥"또는 중첩된 콜백이라고 하는 문제로 이어질 수 있으며 쉽게 성능 저하나 버그로 이어질 수 있습니다.

async/await로 리팩토링

ES8은 async 함수와 await 키워드를 가져왔습니다. async 및 await를 사용해도 비동기 함수가 작동하는 방식은 변경되지 않습니다. 이러한 기능은 가독성을 높이고 Promise 객체의 반환을 보다 매끄럽게 처리하는 구문상의 설탕일 뿐입니다. 또한 비동기 코드를 동기 코드처럼 보이게 만듭니다. 아래는 fetch() 및 async를 사용하는 동일한 await 호출입니다.

const getUser = async (name) => {
  let response = await fetch(`https://api.github.com/users/${name}`);
  let data = await response.json();
  return data;
}

//get user data
getUser('yourUsernameHere')
  .then(console.log(data));

전반적으로 이 구문은 읽기가 훨씬 쉽고 더 이상 큰.then() 블록이 필요하지 않습니다. 그러나 await 키워드를 사용하여 함수를 호출하려면 async 함수 내에 있어야 합니다. 이 항목에서 다룰 수 있는 내용이 훨씬 더 많지만 Javascript 코드에서 async 및 await를 구현하는 간단한 설명이라고 생각했습니다.