axios, Promise, fetch, async/await

[axios]

*Promise API를 활용하는 HTTP **비동기 통신 자바스크립트 라이브러리
*프론트엔드에서 백엔드 API 서버와 데이터를 주고받을 때 주로 사용

 

https://ldd6cr-adness.tistory.com/306

axios는 뭘까

 

[Promise]

Promise 3단계

1. Pending : Promise 객체가 생성되어 사용될 준비가 된 상태

2. Fullfilled : 비동기 처리에 의해 원하는 올바른 결과를 얻어와 그 결과를 정상적으로 처리하고자 resolve가 호출

3. Rejected : 무언가 잘못되어 예외로 처리

 

[fetch]

ES6에서 지원하는 fetch API는 ES6의 Promise와 함께 AJAX를 Wrapping 해주는 매우 가독성이 뛰어난 방식입니다. fetch API은 내부적으로 AJAX API와 Promise를 사용하면서 외부로 들어내지 않습니다. 

 

                                                    fetch와 async/await 사용  ||  fetch와 Promise 체인 (.then()) 

코드 구조	비동기 코드를 마치 동기 코드처럼 순차적으로 작성하여 흐름을 파악하기 쉽습니다.	.then()을 연쇄적으로 연결하는 방식이라, 여러 비동기 작업이 얽히면 '콜백 지옥'처럼 코드가 복잡해질 수 있습니다.
가독성	복잡한 비동기 로직도 선형적인 흐름으로 표현할 수 있어 읽기 쉽고 유지보수가 편리합니다.	여러 개의 .then()과 중첩된 콜백 함수가 많아질수록 가독성이 떨어질 수 있습니다.
오류 처리	익숙한 try...catch 구문을 사용하여 네트워크 오류와 응답 처리 오류를 한 곳에서 처리할 수 있습니다.	Promise 체인의 끝에 .catch()를 붙여 오류를 처리하지만, 중간 단계에서 발생하는 오류를 추적하기는 상대적으로 어렵습니다.
조건부 로직	일반적인 if/else 구문을 그대로 사용할 수 있어 직관적입니다.	Promise 체인 내부에서 조건부 로직을 구현하는 것이 더 복잡할 수 있습니다.
디버깅	코드가 동기 코드와 유사하여 일반적인 디버깅 도구를 사용하기 쉽습니다.	실행 흐름이 콜백 함수 사이를 오가기 때문에 디버깅이 더 까다로울 수 있습니다.

 

 

=>

1. fetch와 async/await 사용

async function fetchData() {
  try {
    // fetch 요청과 JSON 파싱을 await으로 기다립니다.
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) { // HTTP 상태 확인
      throw new Error(`HTTP 오류! 상태: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    // 모든 종류의 오류를 한 곳에서 처리
    console.error('오류가 발생했습니다:', error);
  }
}

fetchData();

 

2. fetch와 Promise 체인 사용

function fetchData() {
  fetch('https://api.example.com/data')
    .then(response => {
      // 응답 상태 확인
      if (!response.ok) {
        throw new Error(`HTTP 오류! 상태: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      // 체인에서 발생하는 모든 오류를 처리
      console.error('오류가 발생했습니다:', error);
    });
}

fetchData();