🎃API

API 호출

✔ client가 server에 데이터를 요청(Request)하고 server가 client에게 요청 데이터를 전달(Response)하는 과정
✔ api는 프로그램과 프로그램을 연결할 수 있는 방법
✔ 즉,api를 호출한다는 것은 다른 프로그램한테 데이터를 받기위해 말을 건다.

API 호출을 비동기 호출로 받는 이유

✔ API 호출은 데이터를 반환받기 위한 목적이 있다. 하지만 응답을 언제 받을지 확실히 알 수 없다.
✔ 우리가 요청한 데이터를 응답해주는 시간은 인터넷 연결 속도, 서버의 부하상태 등에 따라 예상할 수 없고, 때로는 실패하는 경우(그래서 Promise객체에 reject가 있는 이유이기도 하다.)도 있다.
✔ API호출은 응답의 시간을 예상할 수 없으므로(언제 끝날지 모르니깐) 동기 호출이 아닌 Promise 객체를 이용하여 비동기 호출로 응답을 받아낸다.

🎃fetch() - api를 호출하는 방법

API를 호출할 수 있도록 도와주는 JS엔진 내장함수

//응답을 response라는 변수에 담았다. 
let response = fetch("https://jsonplaceholder.typicode.com/posts").then(
 (res) => {
   console.log(res);
 }
);

✔ jsonplaceholder은 개발자들에게 무료로 api 호출에 대해서 더미데이터를 응답해주는 서비스이다.
✔ 무료로 오픈해놓은 api들을 '오픈 API'라고 부른다.
✔ "https://jsonplaceholder.typicode.com/posts" 는 api를 호출할때 누군가에게 말을 걸것인가를 결정하는 주소이다. (링크를 클릭시 json형태의 데이터를 볼 수 있다.)

결과값

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"

위의 결과값은 json의 데이터값과 다르다.
fetch의 return 값은 API 성공 자체의 객체를 받는다.
즉, API 데이터의 편지를 받은 것이다. 위의 결과값은 편지의 내용이 아니고 편지의 봉투이다.

봉투를 뜯어보자(편지의 내용인 json의 형식의 값을 뜯어오자)

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

getData();
//getData함수 호출

결과값

위의 결과값을 보면 json형태로 데이터가 나온것을 볼 수 있다.