API & fetch

조뮁·2022년 9월 11일
0

React-이론

목록 보기
12/12

API

: 응용 프로그램 프로그래밍 인터페이스

  • 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.
  • 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공

API 호출 : 다른 프로그램에서 데이터를 받기 위해 요청하는 것.

  • API호출의 응답이 언제 완료될지 알 수 없음.

Json Placeholder (open API)
https://jsonplaceholder.typicode.com/
개발자들을 위해 더미데이터를 응답해주는 서비스 제공

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

getData();

/* 
Response {type: "cors", url: "https://jsonplaceholder.typicode.com/posts", redirected: false, status: 200, ok: true…}
type: "cors"
url: "https://jsonplaceholder.typicode.com/posts"
redirected: false
status: 200
ok: true
statusText: ""
headers: Headers
body: ReadableStream
bodyUsed: false
arrayBuffer: ƒ arrayBuffer() {}
blob: ƒ blob() {}
clone: ƒ clone() {}
formData: ƒ formData() {}
json: ƒ json() {}
text: ƒ text() {}
<constructor>: "Response"
*/

  • fetch : JS에서 API를 호출할 수 있도록 도와주는 내장함수
  • fetch가 해당 주소를 통해 API를 호출함. 결과값은 Promise객체기 때문에 then을 통해 resolve된 결과를 받아볼 수 있음
  • fetch를 통해 API를 호출하게되면, API 성공 객체(Response 객체) 자체를 반환함. -> Response객체 안에서 우리가 필요한 데이터만은 뽑아서 사용해야함

0개의 댓글