[JavaScript] fetch, promise, async/await, axios 문법 예제 비교하기

 

 

Promise, async/await, axios란 무엇인가요?

• Promise는 자바스크립트에서 비동기 작업을 처리하는 객체입니다. 작업이 완료되었을 때 성공/실패와 같은 결과를 반환하여, 해당 결과에 따른 후속 작업을 쉽게 처리할 수 있습니다.
• async/await는 Promise를 보다 쉽게 처리하는 방법입니다. 비동기 코드를 동기적인 방식으로 작성할 수 있습니다.
• axios는 HTTP 요청을 만드는 데 사용되는 Promise 기반 라이브러리입니다. JSON 데이터를 변환하고, 오류 처리 코드를 단순하게 작성할 수 있습니다.

 

이번 포스팅에서는 Promise, async/await, axios를 사용한 간단한 예제를 살펴보겠습니다.

 

 

 

1. Fetch API와 함께 Promise 사용하기

function getUser(username) {
  fetch(APIURL + username)
    .then((res) => res.json())
    .then((data) => console.log(data))
    .catch((err) => console.log(err));
}

 

 

 

2. Fetch API와 함께 async/await 사용하기

async function getUser(username) {
  try {
    const res = await fetch(APIURL + username);
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

 

 

 

3. axios와 함께 Promise 사용하기

function getUser(username) {
  axios(APIURL + username)
    .then((res) => console.log(res.data))
    .catch((err) => console.log(err));
}

 

 

 

4. axios와 함께 async/await 사용하기

async function getUser(username) {
  try {
    const { data } = await axios(APIURL + username);
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}