Ajax (2) - Fetch API

이 포스트는 이고잉님의 Fetch API 수업을 듣고 정리한 내용입니다.

https://opentutorials.org/course/3281/20562

fetch API - 생활코딩

 

 

Ajax를 구현하는 여러가지 기술이 있지만, 그 중 가장 최신 기술인 fetch API에 대해 알아보겠다.

 

 

 

 

요청과 응답

 

내가

fetch('hello');

라는 코드를 치면

웹브라우저에게 "hello라는 이름의 파을을 서버에게 요청해줘~"라는 뜻이다.

 

 

그러면 이 Request를 받은 서버가 맞는 데이터를 찾아서 Response를 해줘야 하는데

이 Response 시간이 너무 오래 걸리고, 그 사이에 컴퓨터가 아무것도 안하고 있다면

너무나 비효율적일 것이다.

서버가 응답해줄 때까지 웹브라우저는 다른 일을 하고 있으면 훨씬 효율적일 것!

 

그걸 위해 준비된 기능이

then

이다.

 

fetch('hello').then(callbackme);

 

fetch API야, 일단 Request를 보내놔줘. 컴퓨터는 다른 일을 하고 있을게 ~

근데 네가 그 사이에 서버로부터 Response를 받으면 

callbackme함수를 실행시켜줘!

 

라는 뜻.

 

 

 

 

그래서

 

function callbackme(){

console.log('response end');

}



fetch('hello').then(callbackme);

console.log(1);

console.log(2);

 

이 코드를 실행시키면 콘솔창에

1

2

response end

순으로 뜬다.

 

hello라는 파일을 요청해놓고, 다음 코드들을 실행시킨 후, 

응답을 받으면 callbackme 함수를 실행시키는 것이다.

 

 

이게 바로 Ajax의 A에 숨어있는 Asynchronous (비동기) 처리의 의미!

 

 

 

 

 

 

 

 

 

Response 객체

 

fetch('hello');

를 통해 우리는 서버로부터 Response를 받았다.

그러면 우리는 이 Response를 이용해야하지 않겠는가??

 

 

fetch('hello')

.then(function(response){

     console.log(response);

})

 

서버에게 hello라는 파일을 보내달라고 요청(Request)를 한 후,

응답(Response)을 받으면,

그러면(then)

그 Response 객체가 then 속 callback 함수의 첫 Parameter로 들어간다.

 

이게 헷갈리면,

서버가 보내준 Response가 뒤에 이어지는 함수의 Parameter로 들어간다.

로 우선은 이해해도 좋다.

 

콘솔창을 켜보면 Response 객체가 어떤 속성과 메소드를 가졌는지 볼 수 있다.

 

 

 

 

 

여러 속성 중 Status라는 속성이 있는데 여기에 200이 뜨면

서버로부터 데이터를 성공적으로 받아왔다는 뜻이다.

404가 뜨면 서버에 파일이 존재하지 않아~ 못 받아왔어~라는 뜻이다.