🧹 fetch

자바스크립트가 제공하는 메소드로 API 서버로 http 요청을 송수신 할 수 있도록 돕는다.
url 또는 url과 options를 매개변수로 받을 수 있다.
fetch 메소드는 Promise 오브젝트를 리턴한다. 즉, then과 catch에 콜백 함수를 전달해 응답을 처리할 수 있다.

fetch vs XMLHttpRequest

fetch

fetch("~~~", requestOptions)
    .then(
  ~~~
    );

XMLHttpRequest

var oReq = new XMLHttpRequest();
oReq.open("GET", "~~~~");
oReq.onload = function(){	// callback
  ~~~
}
oReq.send();

본질적으로는 같은 기능을 한다.
XMLHttpRequest를 사용하는 경우 콜백 함수 내에서 또 다른 HTTP 요청을 하고 그 두 번재 요청을 위한 콜백을 또 정의하는 콜백 지옥에 빠질 수 있다.

🤙 Promise

비동기 오퍼레이션에서 사용
특정 함수를 실행한 후 Promise 오브젝트에 명시된 사항들을 실행시켜주겠다는 약속 🤙
콜백 지옥을 피할 수 있는 방법 중 하나

🔍 상태

1. Pending

오퍼레이션이 끝나기를 기다리는 상태
성공적으로 끝나면 resolve() 함수를 통해 이 오퍼레이션이 성공적으로 끝났음을 알리고 원하는 값을 전달할 수 있음
오퍼레이션 중 에러가 나는 경우 reject() 함수를 호출

2. Resolve

오퍼레이션이 성공적으로 끝난 경우 실행되는 함수
then의 매개변수로 넘어오는 함수를 실행

3. Reject

오퍼레이션 중 에러가 나는 경우 실행되는 함수
catch의 매개변수로 넘어오는 함수를 실행

참고 : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/USING_Fetch