[programmers] TIL_DAY-18

✅ fetch

 fetch는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 저송 기능을 제공하는 클라이언트 사이드 Web API다. fetch는 XMLHttpRequest 객체보다 사용법이 간단하고 Promise를 지원하기 때문에 콜백 패턴의 단점에서 자유롭다.

const promise = fetch(url [, options])

 fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

fetch("https://jsonplaceholder.typicode.com/todos/1")
	.then(response => console.log(respons));

 Promise를 반환하기 때문에 후속 처리 메서드 then을 통해 Promise가 resolve한 Response 객체를 전달받을 수 있다. 주의할 점은 에러가 발생하도 reject 하지 않고 Response 객체의 ok를 false로 설정한 Response 객체를 resolve 한다.(주로 200번대는 ok가 되고 그외 나머지 에러는 false가 된다. 404 에러와 같은)

따라서 fetch를 사용할 때 반환되는 Response 객체의 ok 상태를 확인해서 에러 처리를 해야 한다.

 대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에, Response 객체는 json() 메서드를 제공합니다.json() 메서드를 사용하면 자바스크립트 객체로 변환된 값을 얻을 수 있다.

✅ Async/Await

 Async/Await을 사용하면 Promise의 후속 처리 메서드 then, catch, finally를 사용하지 않고 동기 처리 처럼 Promise가 처리 결과를 반환하도록 구현할 수 있다.

async function fetchTodo() {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  const response = await fetch(url);
  const todo = await response.json();
  console.log(todo);
}

await 키워드는 반드시 async 함수 내부에서 사용해야 한다.

 async 함수는 언제나 Promise를 반환한다. 명시적으로 Promise를 반환하지 않아도 암묵적으로 반환값을 resolve하는 Promise를 반환한다.

awiat 키워드는 Promise가 settled 상태가 될 때까지 대기하다 setteld 상태가 되면 Promise가 resolve한 처리 결과를 반환한다.

위 예제 코드를 실행하면, fetch(url)을 실행후 응답이 도착해서 fetch 함수가 반환한 Promise가 settled 상태가 될 때까지 대기한다. settled 상태가 되면, Promise가 resolve한 처리 결과가 todo 변수에 할당된다.

에러 처리

 try...catch 문을 사용해서 에러를 캐치할 수 있다. 콜백 함수를 인수로 전달 받는 비동기 함수와는 달리 Promise를 반환하는 비동기 함수는 명시적으로 호출할 수 있기 때문에 호출자가 명확하다.

const foo = async() => {
  try {
    const wrongUrl = "https://wrong.url";
    
    const response = await fetch(wrongUrl);
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
};
foo();

 여기서 catch문은 HTTP 통신에서 발생한 네트워크 에러뿐 아니라 try 코드 블록 내의 모든 문에서 발생한 일반적인 에러까지 모두 캐치할 수 있다.

async 함수 내에서 catch문을 사용해서 에러 처리를 하지 않으면 async 함수는 발생한 에러를 reject하는 Promise를 반환한다.

참고: 모던 자바스크립트 Deep Dive

✅ 정리

 자바스크립트의 비동기 처리과정을 위해 태스크 큐와 이벤트 루프에 대해서 공부하고 콜백에 대해서 공부하고 Promise를 공부하고 async/await을 공부하고... 정말 끝이 없지만 계속해서 하나씩 알아가는 재미가 있는거 같다 물론 뻥 😂