15. javascript fetch 를 활용해 api 호출해보기

6. API & fetch

open API를 활용한다. ( jsonplaceholder )

 

api 호출.

let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
  console.log(res)
);
// Promise<Response> 리턴이기 때문에, 비동기처리 가능 / then 사용 가능.
// fetch는 API의 내용 전체를 리턴함.
/*
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"
*/

 

api 호출하여 raw한 데이터를 가공하여 실제 Response 받기.

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json(); // .json() 으로 내용부 추출.
  console.log(jsonResponse); // (100) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]
}

getData();