[JavaScript] AJAX, fetch API

🔎 비동기, 콜백 함수, Promise, async/await, Node.js에 이어서 fetch API에 대해 학습하였다.

아직 fetch API가 무엇인지, fetch를 이용해서 데이터를 어떻게 불러오는지 명확하지 않은 것 같아 한번 정리하며 복습해보고자 한다.

✔️ 네트워크 요청

이제까지 학습한 비동기 요청의 가장 대표적인 사례는 네트워크 요청이다. 네트워크를 통해 이루어지는 요청은 형태가 다양한데 가장 흔한 형태가 URL로 요청하는 경우이다.

이 때, URL로 요청하는 것을 가능케 해주는 API가 바로 fetch API입니다.

✔️ 이것이 바로 AJAX

이렇게 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 AJAX라고 한다.

다시 정리해보자면, AJAX는 새로 고침 없이 서버에게 GET 요청을 하는 javascript 코드인 것이다.
(이건 어느정도 서버에 대한 이해가 필요한 부분, 이에 대한 정리도 이전에 했었다.[server에 대한 이해])

✔️ 서버에 데이터를 요청하는 방법

1. 원하는 데이터 URL
2. 해당 URL로 GET 요청

<script> 
  fetch('https://github.com/codestates-seb/fe-sprint-async-and-promise-reference')
	.then((response) => {
    // 에러를 완전 잡아주고 싶다면
    if (!response.ok) {
      throw new Error('400 혹은 500 에러 생김')
    }
  	return reponse.json()
})
	.then((결과) => {
  	console.log(결과)
 	// 에러 처리를 하고 싶다면
	.catch(() => {
      console.log('에러 생김')
    })
})
</script>

<script>
  asyn function 데이터 가져오는 함수(){
	let response = await fetch('https://github.com/codestates-seb/fe-sprint-async-and-promise-reference')
if (!response.ok) {
      throw new Error('400 혹은 500 에러 생김')
    }
let result = await response.json();
  console.log(result)
}
데이터 가져오는 함수().catch(() => {
      console.log('에러 생김')
    });
</script>