fetch API 호출하기

날씨나 지하철 정보등을 필요로 하는 어플리케이션을 개발할 때

그 정보를 가져오기 위해서 API를 이용하게 된다.

그런 유용한 정보를 잘 모아서 사용할 수 있게

훌륭한 백엔드 개발자분들이 API 만들어 놓으셨다.

개발자 분들이 만들어 놓으신 API 가이드를 보고

그 서버에 맞는 메소드를 이용해서 GET, POST, DELETE, PUT 으로

정보를 이용할 수 있다.

fetch API

fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤, fetch()는 Promise객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 Response 객체가 취득됩니다. fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다.

declare function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

fetch() 함수는 첫번째 인자로 url리소스가 들어가고 두번째 인자로 옵션객체가 들어간다.

그리고 실행되고 난 후에는 promise객체를 리턴한다.

두번째 인자로 들어가는 옵션 객체에 따라서 fetch() 함수로 서버의 API에 접근해

POST, DELETE, PUT을 수행할 수 있다.

GET은 읽어오기만 하기때문에 옵션 객체가 필요하지 않는다.

?로 되어 있는 것은 필수사항은 아니라는 의미다.

필요할때 넣어서 사용하면 된다.

GET

const message1 = "http://~~~~~~~~~";

fetch(message1)
  .then(response => response.json())
  .then(result => {
    console.log(result);
    return result;
  })

이렇게 하면 GET 요청을 통해 응답으로 받아진 json 파일이 콘솔로그에 찍히게 된다.

POST (-> PUT도 형식은 같다.)

const message2 = "http:// ~~~~~~~~~";

fetch(message2, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    },
    body: JSON.stringify({
      id: "1",
      username: "KimCoder",
      date: new Date(),
      text: "Hello world"
    })
})
.then(console.log);

이렇게 fetch에 두번째 인자에 option object를 넣어서

method에 POST, DELETE, PUT을 넣으면 된다.

POST와 PUT은 보낼 데이터가 있기 때문에 method의 들어갈 키워드만 다르고 나머지는 같다.

DELETE는 보낼 데이터가 없기 때문에 아래의 헤어와 보디는 적지 않아도 된다.

DELETE와 PUT은 아직 다 잘 못하기 때문에 확실해 지면 포스팅을 이어가야 겠다.

아직 공부하는 중입니다. 많이 부족합니다. 언제든 피드백을 주시면 감사하겠습니다.