[책] 자바스크립트 코드 레시피 278 - 205일차

fetch()로 텍스트 데이터 읽어 오기

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

구문

fetch(URL);

Promise를 사용하는 방법

fetch() 를 사용하면 간단하게 외부 파일을 가져올 수 있습니다. 프로그램에서는 데이터 다운로드의 시간 예측이 불가능하므로 Promise의 then()을 사용해 비동기로 처리합니다. fetch()로 데이터를 가져온 뒤 then()을 호출합니다. 이것이 데이터를 읽어 오는 첫 번째 단계로, 샘플 코드의 1번과 같습니다.

네트워크에서 가져온 데이터는 다양한 형식이 있으므로 데이터를 프로그램의 목적에 맞게 해석해야 합니다. 샘플에서는 텍스트 형식의 데이터를 사용하므로 1번에서 가져온 데이터를 text()를 사용해 해석하고 이 결과를 이어지는 then()에서 처리하는 것이 두 번째 단계로, 샘플 코드의 2번과 3번에 해당합니다.

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

await와 async를 사용하는 방법

await와 async는 다음과 같이 사용하며, Promise에 의한 비동기 처리를 동기 처리와 같이 알기 쉽게 표기할 수 있는 것이 장점입니다.

async function load() {
  const data = await fetch('sample.txt');
  const text = await data.text();
  console.log(text);
  document.querySelector('#log').innerHTML = text;
};
load();