Fetch API

sza0203·2021년 12월 13일
0

복습

목록 보기
10/11

Fetch API

let result = fetch(serverURL);

result
  .then((response) => {
    if (response.ok) {
      // 요청 성공.
    }
  })
  .catch((error) => {
    // 요청 실패.
  });
  • 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API.
  • ES6에 추가된 Promise를 리턴하도록 정의됨.
  • 네트워크 요청 성공 시, Promise는 Response 객체를 resolve한다.
  • 네트워크 요청 실패 시, Promise는 에러를 reject한다.

Response

fetch(serverURL).then((response) => {
  response.ok
  response.status
  response.statusText
  response.url
  response.bodyUsed
});
  • Response 객체는 결과에 대한 다양한 정보를 담는다.
  • response.ok는 HTTP Status code가 200-299 사이면 true, 그 외 false이다.
  • response.status는 HTTP status code를 담는다.
  • response.url은 요청한 URL 정보를 담는다.
fetch(serverURL).then((resp) => {
  for (let [k, v] of resp.headers) {
    console.log(k, v);
  }
});
  • response.headers로 Response객체의 헤더 정보를 얻을 수 있다.

Body 메서드

fetch(serverURL)
  .then((response) => {
    return response.json();
  })
  .then((json) => {
    console.log("body :", json);
  });
  • response.json() 메서드는 얻어온 body 정보를 json으로 만드는 Promise를 반환한다.
  • Promise가 resolve 되면 얻어온 body 정보를 읽는다.
  • response.text(), response.blob(), response.formData() 등의 메서드로 다른 형태의 바디를 읽는다.

POST 요청

fetch(serverURL, {
  method: "post",
  headers: {
    "Content-Type": "application/json;charset=utf-8",
    Authentication: "mysecret",
  },
  body: JSON.stringify(formData),
})
  .then((response) => {
    return response.json();
  })
  .then((json) => {
    console.log("POST 요청 결과", json);
  });
  • fetch(url,options)로, fetch 메서드 옵션을 넣는다.
  • method 필드로 여러 요청 메서드를 활용한다.
  • headers, body 필드를 활용해 서버에 추가 정보를 보낸다.
profile
만들고 싶은 앱이 생겨서 RN 공부중입니다.

0개의 댓글