반응형
fetch API 기본 사용법
1) 경고창
<!doctype html>
<html>
<body>
<input type="button" value="fetch" onclick="
fetch('html').then(function(response){
response.text().then(function(text){
alert(text);
})
})
">
</body>
</html>
fetch('html') ; html 파일에 있는 내용 경고창으로 띄우고 싶으면 '
alert(text) ; 모든 작업이 끝난 후 호출. text 변수 안에는 서버가 응답한 데이터가 들어있음
2) 웹페이지의 내용 바꾸고 싶을 때
<!doctype html>
<html>
<body>
<article>
</article>
<input type="button" value="fetch" onclick="
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
">
</body>
</html>
fetch API의 요청과 응답
fetch('html');
: fetch 함수 ; 첫 번째 인자로 전달된 데이터를 서버에게 요청.
→ Asynchronous (비동기적) ; 동시에 실행. 병렬적.
fetch API - response 객체
1) 둘 다 같은 의미의 함수.
function callmeback() {
console.log('response end');
}
callmeback = function(){
console.log('response end');
}
2) 익명함수 사용할 때;
1번에 나온 함수의 정의를 한 번에 할 수도 있음 (그냥 callmeback 정의 넣으면 됨.)
fetch('html').then(callmeback);
fetch('html').then(function(){
console.log('response end');
});
생활코딩 Ajax
반응형
'생활코딩 > JavaScript' 카테고리의 다른 글
| 200813 Ajax 2일차 정리 (0) | 2020.08.13 |
|---|---|
| 200808 7일차 정리 - 파일로 쪼개서 정리 (0) | 2020.08.08 |
| 200807 6일차 정리 - 객체, 메소드, 프로퍼티 (0) | 2020.08.07 |
| 200806 5일차 정리 - 함수 (0) | 2020.08.06 |
| 200805 4일차 정리 - 배열 (0) | 2020.08.05 |
