[API_Fetch] JS - Fetch API (= JavaScript로 파일 내용 가져오기 = fetch메서드=페치메서드)

목차

1. Fetch API 예제1 - txt 파일 내용 가져오기
2. Fetch API 예제2 - (async & await)에 기반
3. Fetch API 정의
4. 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 반환.