fetch API

JavaScript의 내장 API로, 네트워크 통신을 위한 메서드들을 제공합니다. fetch API를 이용하면 XHR 사용시 발생했던 콜백지옥에서 벗어날 수 있습니다. XHR과 비슷한 역할을 하지만, 간단하고 유연한 인터페이스를 제공하며, Promise 기반으로 작동합니다.

❓ XHR과 fetch의 차이점
XMLHpptRequest가 생성하는 인스턴스는 통신의 기능을 수행하는 XMLHttpRequest 객체를 반환하지만, fetch는 인스턴스를 만들지 않고 Promise를 반환합니다.

Promise

Promise를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것은 아니고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.

• 비동기적인 작업을 성공하면 resolve, 실패 시 reject를 실행합니다. resolve에 값을 담아 전달하게됩니다.

then()

• Promise 객체가 성공적으로 처리되었을 때 호출
• 함수를 인자로 받으며, 이 함수는 Promise 객체가 resolve 되었을 때 실행됨
• 이 함수의 인자로 resolve 값이 전달됨

catch()

• Promise 객체가 실패했을 때 호출
• 함수를 인자로 받으며, 이 함수는 Promise 객체가 reject 되었을 때 실행됨
• 이 함수의 인자로 reject 된 이유가 전달됨

let data = fetch("통신할 URL");

• fetch 함수 실행 시 "통신할 URL"에 접근하여 데이터를 다운받고, 완료되면 fulfilled 상태의 Promise가 반환됩니다.

Promise는 resolve되거나 reject됩니다. 그렇기에 then()과 catch()를 사용하여 비동기적인 작업을 쉽게 처리할 수 있습니다.

fetch 이용해서 통신해보기

let response = fetch("통신할 URL");
response.then((res) => res.json())
	.then((res) => {
  		return res;
	})
	.catch((result) => {
  		console.log(new Error(result));
	});

-> JSON 데이터를 얻어야 하기때문에 .json() 메서드를 이용해 자바스크립트 객체로 변환이 가능한 promise 객체를 반환받아야 합니다. 그 후에 then 메서드를 한번 더 사용해야 필요한 데이터를 얻을 수 있습니다.

async & await

async 함수는 항상 Promise 객체를 반환하며, 이를 통해 비동기적인 작업을 처리합니다. await은 async 함수 내부에서만 사용될 수 있고, Promise 객체가 resolve될 때까지 대기한 다음 결과 값을 반환합니다.

function delay(ms){
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Done.');
    }, ms);
  });
}

위의 함수는 일정 시간후에 'Done.'을 반환하는 Promise 객체를 생성합니다. 이를 async를 이용해서 코드를 작성해보겠습니다.

async function asyncDelay(ms){
  	const result = await delay(ms);
  	console.log(result);
}

-> 3초 후에 Done. 출력됨

이 함수는 delay() 가 반환하는 Promise 객체가 resolve 될 때까지 기다린 다음, 결과 값을 출력합니다. await를 사용하면 Promise 객체가 resolve 될 때까지 기다리는 동안 다른 코드를 실행하지 않고 대기할 수 있습니다.

fetch, async, await 사용해보기

async function getData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch(error) {
    console.error(error);
  }
}

// 사용 예시
getData('https://jsonplaceholder.typicode.com/posts/1')
  .then(data => console.log(data))
  .catch(error => console.error(error));

결과