본문 바로가기

프론트엔드/Java Script

JavaScript Sec 02_10 API 호출하기

API


  • 서버에게 데이터를 요청하고 요청한 데이터를 전달 받는 것을 API 호출 이라고 한다. 즉, 다른 프로그램한테 데이터를 받기 위해 말을 거는 것.

  • client컴퓨터와 server컴퓨터는 보통 다른 컴퓨터이고, 따라서 인터넷 연결 속도, 서버의 부하 상태 등에 의해 요청된 데이터를 언제 전달받을지 모른다.

⇒ 동기적으로 처리할 수 없다!

⇒ 따라서 API 호출은 promise 객체를 이용하여 비동기 호출을 한다.

let response = fetch('<https://jsonplaceholder.typicode.com/posts>')
  • 가져오고자 하는 데이터들을 (호출하고자 하는 API) 갖고 있는 주소를 내장함수 **‘fetch’**를 이용하여 변수 response에 저장한다.
let response = fetch('<https://jsonplaceholder.typicode.com/posts>')
	.then((res)=>{
  console.log(res);
})
  • fetch는 promise객체를 리턴한다.
  • promise를 반환하는 함수는 비동기 처리를 하는 함수이고, 이 함수의 처리 결과는 then을 통해 사용할 수 있다.
  • fetch가 해당 주소를 통해 API 호출을 하고, 만약 호출이 성공했다면 resolve가 호출이 된다.

  • fetch를 통해 API를 호출하게 되면 그 API의 결과값을 그냥 반환하는 게 아니라 API 성공 객체 자체를 반환하기 때문에 response라는 객체 자체가 출력된다. (결과값의 포장지라고 생각하면 됨)

  • 포장지를 까서 json 데이터 형식으로 출력한다.
  • async & await이 있어야 json() 함수를 사용할 수 있다.