목차
- Fetch API 예제1 - txt 파일 내용 가져오기
- Fetch API 예제2 - (async & await)에 기반
- Fetch API 정의
- Fetch API 구문
Fetch API 예제1 - txt 파일 내용 가져오기
(예) hz.txt 파일 내용을 가져와 id="demo" 요소 안에 표시하기
<p id="demo"></p>
<script>
let file = "hz.txt"
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);
</script>
결과값: 홈짱닷컴 Homzzang.com 홈페이지 제작관리 그누보드 제작강의
PS. hz.txt 파일 내용
홈짱닷컴 Homzzang.com
홈페이지 제작관리 그누보드 제작강의
Fetch API 예제2 - (async & await)에 기반
Fetch(가져오기)는 async(비동기) 및 await(대기)를 기반으로 함. 즉, 위 예제를 아래처럼 표현 가능.
<div id="demo"></div>
<script>
getText("hz.txt");
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
document.getElementById("demo").innerHTML = y;
}
</script>
결과값: 위와 동일.
PS. x,y 변수 대신 직관적인 변수명 사용 권장.
<div id="demo"></div>
<script>
getText("hz.txt");
async function getText(file) {
let hzObj = await fetch(file);
let hzTxt = await hzObj.text();
document.getElementById("demo").innerHTML = hzTxt;
}
</script>
결과값: 위와 동일.
Fetch API 정의
서버에서 리소스를 가져옴. (예: 서버의 파일 내용 가져오기)
1.
- fetch() 메서드는 서버에서 리소스를 가져오는 프로세스를 시작함.
- fetch() 메소드는 Response 객체로 해석되는 Promise를 반환함.
- 더 이상 XMLHttpRequest가 필요하지 않음.
2.
- ECMAScript6 (ES6: JavaScript 2015)
- 2017년 이후의 주요 최신 브라우저 모두 지원.
3. MDN Fetch API 예제보기
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Fetch API 구문
fetch(file)
[매개변수]
file
가져올 리소스 이름.
[반환값]
Response 객체로 해석되는 Promise 반환.
