[ajax] fetch API

fetch api는 ajax를 구현하는 방법 중 하나이다.

fetch('index.html')

fetch()는 첫번쨰 인자로 주어진 파일을 server에게 요청하는 함수이다.
index.html을 서버에게 요청하였다.

fetch('index.html').then(function(response) {
  if (response.state === '404') {
    console.log('404 error : not found')
  }
})

.then()은 서버에 응답이 온 다음에, 실행된다.
index.html을 서버에게 요청하고, 응답이 오면 두번째 인자로 주어진 함수가 실행된다.
console.log(response)가 실행되었다.

이 때 실행된 함수는 response객체를 매개변수로 가지고 있다. response 객체는 응답 성공 여부, 상태 등의 정보를 가지고 있다. response 객체 더 알아보기🔍

response 객체를 이용하여 서버에 응답한 상태에 따라 다른 메세지를 제공할 수 있다.

fetch('index.html').then(function(response) {
  console.log(1)
})
console.log(2)

이 일련의 과정은 비동기적으로 이루어진다. 서버에서 응답이 올 때까지, 기다리지 않고 그 다음 코드를 실행시킨다.

console.log(2)가 실행된 후 console.log(response)이 실행된다.