fetch 함수

fetch 함수의 기본형

fetch(url, options)
  .then(response => {
    // 처리할 내용
  })
  .catch(error => {
    // 에러 처리
  });

• url: 요청할 리소스의 URL
• options: 요청 메서드, 헤더, body 등을 설정할 수 있다. (선택적)

 

 

다음은 간단한 GET 요청을 보내는 방법이다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // JSON 형태로 응답 데이터를 파싱
  })
  .then(data => {
    // 처리할 데이터
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

 

response.ok는 HTTP 응답 상태 코드가 200에서 299 사이인지 확인하여 요청이 성공했는지 여부를 나타냄

response.json()은 응답 데이터를 JSON 형태로 보내는 함수

 

then(data)는 fetch() 함수로부터 반환된 promise가 성공적으로 이행되었을 때 실행된다.

즉, 네트워크 요청이 성공적으로 완료되고 서버에서 올바른 응답을 받았을 때 

JSON 형태로 바뀐 데이터에 'data' 라는 이름을 붙여넣는다.

 

console.log(data['RealtimeCityAir']['row'][0])

'data' 객체의 'RealtimeCityAir' 속성 안에 있는 'row' 배열의 첫번째 요소를 로그로 출력