[1] AJAX - fetch API

<사전 숙지>
AJAX는 절대로 폴더에서 바로 파일을 열면 안 된다.
보안문제로 인해서 꼭 서버랑 통신을 해야 하기 때문에
웹서버를 통해서 웹사이트를 구동해야 동작한다.

1. fetch API란?

Ajax를 구현하는 여러가지 기술이 있다.
여기서는 최신 기술인 fetch API를 이용한다.
fetch API는 기존의 방식에 비해서 더 유연하고, 분명하다. 💥

기본 예제 with 익명함수

<input type="button" value="fetch" onclick="
	fetch('html').then(function(response){
		response.text().then(function(text){
          	alert(text); //기능 01
			document.querySelector('article').innerHTML = text; //기능 02
		});
	});

• 기능01: html라는 파일에 있는 내용이 경고창으로 나옴
• 기능02: article의 innerHTML은 html라는 파일의 내용

📌 중요!

모든 작업이 끝난 다음에는
alert(text), document.querySelector('article').innerHTML = text;
이 부분이 호출되도록 약속되어있고, text라는 변수 안에는 서버가 응답한 데이터가 들어가있다.

input 클릭 시 NetWork 동작

input을 누르면 html 파일을 불러오는 것을 확인할 수 있다.

2. fetch API 문법

문법 해석 예제

//callBackMe 함수
function callBackMe(){
  console.log('response end');
}

//fetch 실행
fetch('html').then(callBackMe);
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');
console.log('6');
console.log('7');

• fetch('html'): 클라이언트가 서버에게 html이라는 파일을 요청
• then(callBackMe): fetch API야, 응답이 끝나면 callBackMe을 실행해 줘.
• fetch를 해서 요청하고 then을 통해 callBackMe 라는 함수를 요청했다.

Asynchronous 비동기 방식

위 예제에서 fetch('html').then(callBackMe); 명령은 딱 끝나고,
밑에 있는 console.log 명령들이 실행되다가
웹브라우저가 응답 받는 게 끝나면 그때 callBackMe 라는 함수를 호출한다.
Asynchronous 는 fatch 가 실행되고 있는 와중에 다른 코드들이 실행되는 것이다.
(동시에 실행, 병렬적인 실행이라고 할 수 있음.)
- 위 예제가 비동기 방식으로 실행됐을 경우 console창

synchronous 동기 방식

Asynchronous 비동기 방식 과는 반대로,
요청이 시작되고 끝날 때까지 console.log 명령들이 실행되면 안 된다.
만약 synchronous 동기 방식 으로 실행될 경우
response end 가 첫 번째로 뜨고, 1~7까지의 숫자가 console에 출력됐을 것이다.