20231110 TIL

Today 요약

[✅] 프로그래머스 코딩테스트 2문제

[✅] FE 강의  1시간 반

---

배운 점

1. Fetch API

1-1 Get

fetch('https://api.example.com/data')
  .then(response => {
    // 응답이 성공적으로 받아졌는지 확인
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // JSON 형태로 파싱하여 반환
    return response.json();
  })
  .then(data => {
    // 처리된 데이터 사용
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Error:', error);
  });

1-2 Post 

fetch('https://api.example.com/post-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

1-3 비동기

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    // 응답이 성공적으로 받아졌는지 확인
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

 

Fetch API 사용하기 - Web API | MDN

• fetch 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받는다
• 반환값은 해당 요청에 대한 Response로 이행하는 Promise 인데 서버가 헤더를 포함한 응답을 하는 순간 이행한다

ferch 전역함수

• javascript 에서 제공하는 네트워크 리퀘스트를 간편하게 다룰 수 있는 api promise 기반으로 비동기적으로 작동하며 , HTTP 리퀘스트를 만들고 응답을 다루는 데 사용된다
• 위의 예제에서 fetch는 URL을 인자로 받아 해당 URL로 GET 리퀘스트를 보내고 반환된 'Response' 객체를 처리하는 Promise를 반환 다음 then 메소드를 통해 응답 처리하고 catch 로 오류 처리