기초적인 Fetch API 사용

fetch를 소개하기에 앞서 ajax를 한 문장으로 요약하면 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 

기술이라고 생각하면 될 것 같습니다.

이제 fetch에 대해 설명을 드리자면 그 동안 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했었는데 많은 단점들이 발견되고,  이를 보완하기 위해서 Fetch API를 도입하였는데 이는 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있고, Promise를 기반으로 되어 있기때문에 상태에 따른 로직을 추가하고 처리하는데에 최적화 되어 있습니다.

fetch('사과');

fetch 함수는 예를 들어 저렇게 사과라는 인자로 전달된 데이터를 서버에 요청하는 역할을 합니다.

fetch('사과').then(콜백);

then 메소드는 fetch가 서버에 요청하고 응답하는게 끝나면 그 때 지금 예를 든 콜백이라는 함수를 요청하게 됩니다.

이런 방식을 비동기(Asychronous)적으로 동작한다고 합니다.  (그래서 Ajax할 때 A가 Asychronous의 약자입니다. 연관성O)

response객체

fetch를 통해서 요청을 했을 때, 응답한 결과를 갖고 있는 객체라고 보면 될 것 같습니다.

response객체 안에서도 여러가지 속성 값들이 있는데, 그걸 통하여 서버랑 어떤 상태로 통신이 이루어졌는지 등을 

알수 있는 중요한 역할을 합니다.

앞서 설명드린 것들을 토대로 원하는 경로에 파일 존재여부를 확인할 수 있는 간단한 코드를 보여드리겠습니다.

fetch를 통해 'test'라는 파일을 요청할 것 인데, then메소드 안에 저렇게 함수가 선언된 구조를 이름이 없는 '익명 함수'라고 합니다.

그 안에다가 response객체인 'responseob'를 선언했고,  

console.log(responseob); : console log를 통해 response객체의 내용을 콘솔 창에서 확인합니다.(이거는 파일확인이랑 관계X)

안에 if문을 넣어서 response객체의 status(response객체의 속성중 하나)값이 404이면 404: file not found라는 알림창을 

뜨게 하고, 아니면 파일이 여기 존재한다는 알림창을 뜨게합니다. 

여기서 status값이 404라는 것은 파일이 없다는, 비어있다는 대표적인 에러값을 나타내는 것이고, 

값이 200이라면 정상적으로 작동했다는 뜻입니다.

밑에 콘솔로그 1,2는 then메소드가 작동하는걸 눈으로 확인 시켜드리기 위해 일부러 넣은겁니다.

보기와 같이 fetch라는 파일을 눌렀을 때, ' test'라는 파일이 존재하면

 status값이 200이라고 나오면서 파일이 여기있다는 알림창이 뜹니다.

그리고 아까 then 메소드에 포함되어있지 않았던 콘솔로그 1,2가 시행되고 나서 then메소드 안에 있던 알림창이랑 리스폰스객체를 

출력해주는 내용이 시행되었습니다.   이걸 통해 then 메소드가 잘 작동하는 것을 확인할 수 있습니다.

반대로 test파일이 존재하지 않으면 , status값이 404이면 보기와 같이 404: not found 라는 알림창이 뜹니다.