[Javascript] API & fetch

 

API(Application Programming Interface; 응용 프로그래밍 인터페이스)

응용프로그램에서 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스. 파일제어, 창 제어, 화상처리, 문자 제어 등을 위한 인터페이스 제공. 소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합. 

 

 

 

API를 비유한 레스토랑.  한입 크기로 잘라 먹는 리액트(React.js)

레스토랑 주문과정 을 통해 웹 사이트를 통해서 서버에 데이터를 요청하고 응답받는 방식을 이해

 

 

 

 

 

client 웹브라우저로 정보 요청               →           요청되어있는 주문 전달                   →           데이터가 보관되어있음

 

 

 

 

 

웹브라우저와 서버의 연결다리 로 생각하면 편하다.

다른데이터를 받기위해 서버에 요청을 한다.

 

API호출 : 요청데이터를 받환받기위함, 다만 함수와 다른점은 어느시점에 받을 지 모른며, 클라이언트와 서버가 다를 수 있기때문. 인터넷속도, 서버부하 등등에 따라 다르고 실패할 수 있다. reject의 가능성이 있기때문에 promise를 사용하여 반환받는다.

 

 

 

 

 

API 호출하기

 

JSONPlaceholder - Free Fake REST API

API호출에 대해 범위데이터를 응답해주는 공개 API인 JSONPlaceholder를 사용할거다. 

 

우리가 쓸 수 있는 자원들 중 /posts를 누르면 url이동을 하며

json 객체배열 형태의 화면 response를 볼 수 있다.

 

 

 

api를 호출하려면 주소를 알아야하니 /post 주소를 복사한다.

 

 

fetch : api 호출을 도와주는 내장함수

promise를 반환하는 비동기함수이며 then을 통해서 사용가능

let response = 
  fetch("https://jsonplaceholder.typicode.com/posts")
  .then((res)=>{
    console.log(res);
  });

 

 

 

 

 

fetch를 통해서 api를 호출하게되면 결과값을 보이는게아닌 api 성공 객체자체를 보내기때문에 response객체가 출력된다. 

 

 

 

 

안에 있는 Date 출력을 하려면?

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData();

async 함수를 호출하여 그 안에 json 객체를 담아준다.

성공객체와 아래는 Object가 담긴 배열이 출력되게 되는데,

배열안을 열어보면

어디서 많이 보던 느낌!?

 

 

JSONPlaceholder /post url안에있던 json 객체가 출력된 것을 확인 할 수 있다.

 

 

 

 

 

 

참고 : 

- https://developer.mozilla.org/ko/docs/Glossary/API

- 한입리액트