티스토리 뷰

[개발]/JavaScript

fetch API

kiki14 2023. 6. 20. 23:59
fetch('https://api.example.com/data') // 첫 번째 인자로 요청을 보낼 url을 받는다.
  // fetch함수는 promise를 반환. 
  // then()은 promise chain 
  // 서버로부터 받은 response객체를 처리합니다.
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // response 본문을 json형태로 파싱. 얘도 promise 반환
    return response.json(); 
  })
  // 여기서 또 then()으로 chain
  .then((data) => {
    // 서버에서 반환된 데이터를 사용할 수 있게 된다.
    console.log(data);
  })
  .catch((error) => {
    // 네트워크 요청 중 발생한 에러를 처리한다.
    console.error('Error:', error);
  });

fetch(url)

 

  • - params: 가져오려는 리소스 경로
  • - return: 요청에 대한 promise로 서버가 헤더를 포함한 응답을 하는 순간 이행한다.
    (서버가 HTTP 오류 응답 코드로 응답해도 이행함)

 

위 예시는 GET 요청을 보내고 JSON 응답을 처리하는 간단한 예제이다.

Fetch API는 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)와 헤더, 요청 본문 등을 설정할 수 있는 다양한 기능이 있다.  

 

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2026/06   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함