fetch API

Asynchronous Javascript And Xml : AJAX, 에이작스

비동기 방식의 Javascript와 Xml을 가리킨다.

데이터를 가져올 때 불필요한 정보까지 끌어내는 전체 페이지 리로드 없이 

Ajax를 이용해서 필요한 정보만 가져 올 수 있다.

→ 데이터를 절약할 수 있고 + 싱글 페이지 애플리케이션을 구현할 수 있다.

싱글 페이지 애플리케이션 = 하나의 페이지로 여러 정보를 표현할 수 있는 애플리케이션.

 

ajax를 구현하려면?

→ fetch API를 사용할 것이다

 

fetch API의 요청과 응답

클라이언트와 서버가 서로 통신을 할 때 클라이언트가 우선 요청.

fetch함수는 첫번째 인자로 전달된 데이터를 서버에게 요청해 준다.

 

fetch('javascript') : 웹브라우저에게 javascript라는 파일을 서버에 응답해 달라고 요청.

그럼 서버가 디렉토리 내에 있는 javascript라는 파일을 찾아 응답해 준다.

 

서버는 클라이언트가 요청한 내용에 적당한 데이터를 꺼내서 응답을 해줘야 하는데, 

이 때 시간이 어느 정도 소요된다. 

fetch('javascript').then(...) : 서버의 응답이 끝나면 ...내에 있는 일을 하라고 지정한다. (Asynchronous! 비동기적 실행!)

function callbackme(){
  console.log('response end')
}
fetch('javascript').then(callbackme);
console.log(1);
console.log(2);

따라서... 이렇게↑ 해 놓으면 콘솔에 1, 2, response end 순서로 출력된다.

fetch(...)가 실행되고 있는 동안 다른 코드도 실행이 되고 있는 것.

 

fetch API의 response객체

함수가 이름이 필요한 경우는 그 함수를 코드 여기 저기서 반복적으로 불러와야 할 때.

특정 위치에서만 독점적으로 사용할 경우에는 이름이 없는 익명함수를 사용해도 된다.

function callbackme(){
  console.log('response end');
}
callbackme = function(){
  console.log('response end');
}

위 두개가 같은말! 

그렇다면

fetch('javascript').then(function(){
  console.log('response end')
});

이렇게 해도 되는거겠지요...

 

then에 콜백함수를 주게 되면, 콜백 함수를 fetch API가 실행시킬 때

해당 함수의 첫 번째 인자의 값으로 response 객체를 준다.

콘솔로 response를 찍어 보면 이런 게 나옴.(없는 파일을 요청했을 때 뜨는 응답)

console.log(response.status) 등으로 객체 내의 원하는 데이터만 가져올 수도 있다.

 

웹서버가 응답한 결과를 담고 있는 객체 = response

그리고 그 안에는 여러 가지 속성을 통해 서버와 통신할 때 어떻게 통신이 이루어지는지 알 수 있는 단서를 보여 준다.

fetch(topicName).then(function(response){
  response.text().then(function(text){
    document.querySelector("article").innerHTML = text;
  });
});

⇢ topicName에 대한 fetch의 결과값을 1번째 줄의 then 이후 함수의 첫 번째 인자(=response)로 넣어주고,

그 response값을 text로 변환한 다음, 그 값을 2번째 줄의 then 이후 함수의 첫 번째 인자(=text)로 넣어주고,

text인자에 들어간 값은 document.querySelector("article").innerHTML 에 할당된다.

 

 

원리를 알면 자유도가 높아진다...