0 fetch란?
fetch 함수는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이트 Web API이다.
1 fetch 사용법
<!DOCTYPE html>
<html lang="ko">
<body>
<article></article>
<input type="button" value="fetch" onclick="
fetch('css').then(function(response){
response.text().then(function(text){
alert(text);
})
})
">
</body>
</html>fetch('css')
첫번째 인자로 전달된 데이터를 서버에게 요청한다.
then()
최종적으로 응답이 끝나면 실행된다.
alert(text)
text라는 변수 안에 서버가 응답한 데이터가 들어가있고 이 부분이 호출되게 된다.
2 fetch 특징
function callbackme(){
console.log('response end');
}
fetch('html').then(callbackme);
console.log(1);
console.log(2);- XMLHttpRequest 객체보다 사용법이 간단하다.
- Asynchronous 비동기적으로 작동한다.
- 최근에 추가된 Web API라 IE를 제외한 대부분의 브라우저에서 제공한다.
3 fetch API - response 객체
fetch('javascript').then(function(response){
// console.log(response.status); //404
if(response.status='404'){
alert('파일이 없습니다.');
}
});
fetch를 통해서 요청했을 때 서버가 응답한 결과를 담고있는 객체,데이터가 response
이 안의 여러가지 속성을 통해서 서버와 통신을 할 때 어떤 상태인지를 알 수 있는 단서들이 들어있다.
fetch 연습 예제
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a onclick="
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML =text;
})
})
// document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is....'
">HTML</a></li>
<li><a onclick="
fetch('css').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
// document.querySelector('article').innerHTML = '<h2>CSS</h2>CSS is....'
">CSS</a></li>
<li><a onclick="
document.querySelector('article').innerHTML = '<h2>Javascript</h2>Javascript is....'
">Javascript</a></li>
</ol>
<article></article>
</body>
</html>
<!-- fetch를 통해서 JSON 파일의 원하는 영역만 들고와보고 싶다. -->리팩토링
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a onclick="fetchPage('html')">HTML</a></li>
<li><a onclick="fetchPage('css')">CSS</a></li>
<li><a onclick="fetchPage('Javascript')">Javascript</a></li>
</ol>
<article></article>
<script>
function fetchPage(name){
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML =text;
})
})
}
</script>
</body>
</html>중복된 부분들을 fetchPage함수로 만들어서 가독성 좋게 리팩토링 했다.
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [javascript] resize 이벤트 (0) | 2021.11.29 |
|---|---|
| [javascript] scroll event (0) | 2021.11.29 |
| [Javascript] 함수 (0) | 2021.10.24 |
| [Javascript] Object (0) | 2021.10.12 |
| [Javascript] ES6 모듈(ESM) (0) | 2021.10.11 |
