2021. 3. 21. 15:21ㆍFront-end/Javascript
안녕하세요, 이번 시간에는 fetch API의 원리와 문법적인 해석을 해보겠습니다.
클라이언트와 서버가 서로 통신을 하는 상황에서,
클라이언트가 우선 요청을 하는데 fetch('javascript')라는 것은 어떤 의미냐면
우리가 웹브라우저한테 웹브라우저야, "자바스크립트라는 파일을 서버에게 응답해줘" 라고 요청한 것입니다.
그러면 서버는 응답을 할 것입니다.
fetch('html') 까지만 쳐보고 실행해보기
<body>
<article>
</article>
<input type="button" value="fetch" onclick="
fetch('html')
">
</body>↑ fetch.html
이렇게 치고 실행을 해보면
 클릭 전 |
 클릭 후 |
이처럼 클릭하면 html에 접속해서 데이터를 가져오고 있는 것을 볼 수가 있습니다.
fetch라고 하는 함수는 첫번째 인자로 전달한 데이터를 서버에게 요청하는 함수입니다.
.then()이라는 건 무엇일까
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})then부분은 저기서부터 저기까지가 한 덩어리입니다.
then이라고 하는 건 뭐냐면 서버가 적당한 데이터를 꺼내서 응답을 해줘야 할 텐데, 응답을 해주는데 시간이 걸릴 수 있습니다. 극단적으로 1시간이 걸린다고 치면, 그럼 1시간 동안 컴퓨터가 아무것도 안하고 있는게 아니라, 서버가 응답하기 전까지 다른 일을 하고 있으면 되겠죠. 그걸 위해 준비된 기능이 then이라는 것입니다.
<body>
<article>
</article>
<input type="button" value="fetch" onclick="
function callbackme(){
console.log('response end');
}
fetch('html').then(callbackme);
">
</body>이것은 "fetch API야, 응답이 끝나면 callbackme라는 함수를 실행시켜줘 "라고 이야기하는 것입니다.
reload 해보면, fetch를 누르기전에는 아까와 마찬가지로 network에 fetch.html밖에 없었다가 누르면 html에 접속해서 데이터를 가져오고, 서버가 응답한다음에 callbackme라는 함수가 실행되면서 response end가 콘솔에 보입니다.
<body>
<article>
</article>
<input type="button" value="fetch" onclick="
function callbackme(){
console.log('response end');
}
fetch('html').then(callbackme);
console.log(1);
console.log(2);
">
</body>이렇게 작성하면 콘솔엔 어떤 순서로 뜰까요?
fetch 코드가 마지막에 실행이되는 것을 볼 수가 있습니다.
왜냐면 fetch api는 현재 비동기(Asynchronous)적으로 실행되고 있기 때문입니다.
만약에 fetch api가 동기방식으로 실행되고 있다면, 요청이 시작되고 끝날때까지 뒤에 있는 코드들이 실행되지않고 멈춰있어야 합니다. 이런걸 동기적인 실행이라고 합니다.
비동기방식이라는 것은 비동기코드가 실행되고 있는 동안 다른 코드가 실행이 되는 것을 말합니다. 즉 병렬적인 것이라고 이해하면 됩니다.
다음시간에는 fetch API 에서 response 객체에 대해 알아보겠습니다!
'Front-end > Javascript' 카테고리의 다른 글
| [Ajax] Ajax의 적용 (0) | 2021.03.21 |
|---|---|
| [Ajax] fetch API - response 객체 (0) | 2021.03.21 |
| [Ajax] fetch API - 사용법 (0) | 2021.03.19 |
| [Ajax] Ajax란? (0) | 2021.03.19 |
| Promise - 콜백 지옥을 Promise로 바꾸기! (0) | 2021.02.05 |