웹사이트 검색

JavaScript Fetch API를 사용하여 데이터를 가져오는 방법

소개

XMLHttpRequest가 API 요청을 만드는 데 사용되었던 때가 있었습니다. 약속이 포함되지 않았고 깨끗한 JavaScript 코드를 만들지 않았습니다. jQuery를 사용하면 jQuery.ajax()의 보다 깔끔한 구문을 사용할 수 있습니다.

이제 JavaScript에는 API 요청을 수행하는 고유한 기본 제공 방법이 있습니다. 이것은 Promise로 서버 요청을 하는 새로운 표준인 Fetch API이지만 추가 기능도 포함합니다.

이 자습서에서는 Fetch API를 사용하여 GET 및 POST 요청을 모두 생성합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

  • Node.js용 로컬 개발 환경입니다. Node.js 설치 및 로컬 개발 환경 생성 방법을 따르십시오.
  • 자바스크립트로 코딩하는 방법 시리즈에서 자세히 알아볼 수 있는 자바스크립트 코딩에 대한 기본적인 이해
  • JavaScript의 Promise에 대한 이해. JavaScript에서 이벤트 루프, 콜백, 약속 및 async/await를 읽으십시오.

1단계 - Fetch API 구문 시작하기

Fetch API를 사용하는 한 가지 방법은 API의 URL을 매개변수로 fetch()에 전달하는 것입니다.

fetch(url)

fetch() 메서드는 Promise를 반환합니다. fetch() 메서드 뒤에 Promise 메서드 then()을 포함합니다.

fetch(url)
  .then(function() {
    // handle the response
  })

반환된 Promise가 resolve이면 then() 메서드 내의 함수가 실행됩니다. 이 함수에는 API에서 받은 데이터를 처리하기 위한 코드가 포함되어 있습니다.

then() 메서드 뒤에 catch() 메서드를 포함합니다.

fetch(url)
  .then(function() {
    // handle the response
  })
  .catch(function() {
    // handle the error
  });

fetch()를 사용하여 호출하는 API가 다운되거나 다른 오류가 발생할 수 있습니다. 이 경우 reject 약속이 반환됩니다. catch 메서드는 reject를 처리하는 데 사용됩니다. 선택한 API를 호출할 때 오류가 발생하면 catch() 내의 코드가 실행됩니다.

Fetch API를 사용하기 위한 구문을 이해하면 이제 실제 API에서 fetch()를 사용할 수 있습니다.

2단계 - Fetch를 사용하여 API에서 데이터 가져오기

다음 코드 샘플은 JSONPlaceholder API를 기반으로 합니다. API를 사용하면 10명의 사용자를 확보하고 JavaScript를 사용하여 페이지에 표시합니다. 이 자습서는 JSONPlaceholder API에서 데이터를 검색하여 작성자 목록 내의 목록 항목에 표시합니다.

HTML 파일을 만들고 authors의 id로 제목과 정렬되지 않은 목록을 추가하여 시작합니다.

<h1>Authors</h1>
<ul id="authors"></ul>

이제 HTML 파일 하단에 script 태그를 추가하고 DOM 선택기를 사용하여 ul을 가져옵니다. authors와 함께 getElementById를 인수로 사용합니다.

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
</script>

authors는 이전에 생성된 ul의 id임을 기억하십시오.

다음으로 DocumentFragment인 목록을 만듭니다.

<script>
  // ...

  const list = document.createDocumentFragment();
</script>

추가된 모든 목록 항목은 목록에 추가됩니다. DocumentFragment는 활성 문서 트리 구조의 일부가 아닙니다. 이렇게 하면 문서 개체 모델이 변경될 때 성능에 영향을 미치는 다시 그리기가 발생하지 않는 이점이 있습니다.

10명의 무작위 사용자를 반환할 API URL을 보유할 url이라는 상수 변수를 만듭니다.

<script>
  // ...

  const url = 'https://jsonplaceholder.typicode.com/users';
</script>

이제 Fetch API를 사용하여 url을 인수로 사용하여 fetch()를 사용하여 JSONPlaceholder API를 호출합니다.

<script>
  // ...

  fetch(url)
</script>

Fetch API를 호출하고 URL을 JSONPlaceholder API에 전달합니다. 그러면 응답이 수신됩니다. 그러나 받는 응답은 JSON이 아니라 해당 정보로 수행하려는 작업에 따라 사용할 수 있는 일련의 메서드가 있는 개체입니다. 반환된 객체를 JSON으로 변환하려면 json() 메서드를 사용합니다.

response라는 매개변수가 있는 함수를 포함할 then() 메서드를 추가합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {})
</script>

response 매개변수는 fetch(url)에서 반환된 객체의 값을 사용합니다. json() 메서드를 사용하여 response를 JSON 데이터로 변환합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
</script>

JSON 데이터는 여전히 처리해야 합니다. data라는 인수가 있는 함수를 사용하여 다른 then() 문을 추가합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {})
</script>

이 함수 내에서 data와 동일하게 설정되는 authors라는 변수를 만듭니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;
    })
</script>

authors의 각 작성자에 대해 해당 이름을 표시하는 목록 항목을 만들고 싶을 것입니다. map() 메서드는 이 패턴에 적합합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {

      });
    })
</script>

map 함수 내에서 li라는 변수를 생성합니다. 이 변수는 li(HTML 요소)를 인수로 사용합니다. 또한 name에 대한 h2와 email에 대한 span을 생성합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');
      });
    })
</script>

h2 요소에는 저자의 이름이 포함됩니다. span 요소에는 작성자의 이메일이 포함됩니다. innerHTML 속성과 문자열 보간법을 사용하면 다음과 같이 할 수 있습니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;
      });
    })
</script>

다음으로 이러한 DOM 요소를 appendChild와 연결합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    })

  ul.appendChild(list);
</script>

각 목록 항목은 DocumentFragment 목록에 추가됩니다. map이 완료되면 list가 ul 정렬되지 않은 목록 요소에 추가됩니다.

두 then() 함수가 완료되면 이제 catch() 함수를 추가할 수 있습니다. 이 함수는 잠재적인 오류를 콘솔에 기록합니다.

<script>
  // ...

  fetch(url)
    .then((response) => {
      // ...
    })
    .then((data) => {
      // ...
    })
    .catch(function(error) {
      console.log(error);
    });

  // ...
</script>

다음은 생성한 요청의 전체 코드입니다.

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>

방금 JSONPlaceholder API 및 Fetch API를 사용하여 GET 요청을 성공적으로 수행했습니다. 다음 단계에서는 POST 요청을 수행합니다.

3단계 - POST 요청 처리

가져오기는 기본적으로 GET 요청으로 설정되지만 다른 모든 유형의 요청을 사용하고 헤더를 변경하고 데이터를 보낼 수 있습니다. POST 요청을 생성해 봅시다.

먼저 JSONPlaceholder API에 대한 링크를 보유하는 상수 변수를 포함합니다.

const url = 'https://jsonplaceholder.typicode.com/users';

다음으로 개체를 설정하고 가져오기 함수의 두 번째 인수로 전달해야 합니다. 이것은 키가 name이고 값이 Sammy(또는 귀하의 이름)인 data라는 객체입니다.

// ...

let data = {
  name: 'Sammy'
}

이것은 POST 요청이므로 명시적으로 명시해야 합니다. fetchData라는 객체를 생성합니다.

// ...

let fetchData = {

}

이 개체에는 method, body 및 headers의 세 가지 키가 포함되어야 합니다.

// ...

let fetchData = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
}

method 키의 값은 POST입니다. body는 방금 생성된 data 개체의 JSON.stringify() 형식과 동일하게 설정됩니다. 헤더는 Content-Type: application/json 값을 가집니다. 문자셋=UTF-8.

Headers 인터페이스는 Fetch API의 속성으로, 이를 통해 HTTP 요청 및 응답 헤더에 대한 작업을 수행할 수 있습니다. Express에서 경로 및 HTTP 요청 방법을 정의하는 방법이라는 이 기사에서 자세한 정보를 얻을 수 있습니다.

이 코드가 있으면 Fetch API를 사용하여 POST 요청을 할 수 있습니다. url 및 fetchData를 fetch POST 요청에 대한 인수로 포함합니다.

// ...

fetch(url, fetchData)

then() 함수에는 JSONPlaceholder API에서 받은 응답을 처리하는 코드가 포함됩니다.

// ...

fetch(url, fetchData)
  .then(function() {
    // Handle response you get from the API
  });

다음은 생성한 요청의 전체 코드입니다.

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
}

let fetchData = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
}

fetch(url, fetchData)
  .then(function() {
    // Handle response you get from the API
  });

또는 fetch()에 Request 개체를 전달할 수 있습니다.

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
}

let request = new Request(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
});

fetch(request)
  .then(function() {
    // Handle response you get from the API
  });

이 접근 방식을 사용하면 request를 fetch()의 유일한 인수로 사용하여 url 및 fetchData를 대체할 수 있습니다.

이제 Fetch API를 사용하여 POST 요청을 생성하고 실행하는 두 가지 방법을 알게 되었습니다.

결론

Fetch API는 아직 모든 브라우저에서 지원되지 않지만 XMLHttpRequest의 훌륭한 대안입니다.

React를 사용하여 Web API를 호출하는 방법을 배우려면 바로 이 주제에 대한 이 기사를 확인하십시오.