[JavaScript] 자바스크립트에서 fetch()로 텍스트 데이터 읽어오기

226_자바스크립트에서 fetch()로 텍스트 데이터 읽어오기

[적용]

• 데이터를 가져오고 싶을 때

---

[문법]

메소드	의미	반환
fetch(URL)	URL로 데이터 가져오기	Promise

---

[내용]

fetch()를 사용하면 간단하게 외부 파일을 가져올 수 있다.

프로그램에서는 데이터 다운로드의 시간 예측이 불가능하므로 Promise의 then()을 사용해 비동기로 처리한다.

fetch()로 데이터를 가져온 뒤 then()을 호출한다.

이것이 데이터를 읽어 오는 첫 번째 단계로, 샘플코드의 (1)과 같다.

 

네트워크에서 가져온 데이터는 다양한 형식이 있으므로 데이터를 프로그램의 목적에 맞게 해석해야 한다.

샘플에서는 텍스트 형식의 데이터를 사용하므로 (1)에서 가져온 데이터를 text()를 사용해 해석하고

이 결과를 이어지는 then()에서 처리하는 것이 두 번째 단계로, 샘플 코드의 (2)와 (3)에 해당한다.

 

Promise를 사용하는 방법

JavaScript  

fetch('sample.txt') // (1)
  .then((data) => data.text())  // (2)
  .then((text) => {
    console.log(text);
  });  // (3)

 

await와 async를 사용하는 방법

await와 async는 다음과 같이 사용하며,

Promise에 의한 비동기 처리를 동기 처리와 같이 알기 쉽게 표기할 수 있는 것이 장점이다.

JavaScript (부분)

async function load() {
  const data = await fetch('sample.txt');  // (1)
  const text = await data.text();  // (2)
  console.log(text);  // (3)
  // 텍스트 출력
  document.querySelector('#log).innerHTML = text;
}

load();

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김