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

*아래 글을 번역했습니다

How To Use the JavaScript Fetch API to Get Data | DigitalOcean

 

소개

 

XMLHttpRequest를 API를 요청하는데 쓰던 시절이 있었습니다. Promise를 포함하지도 않고, 바닐라 자바스크립트 코드를 사용하지도 않았었죠. 제이쿼리를 쓰면서, 우리는 더 클린한 jQuery.ajax()구문을 사용할 수 있게 되었습니다.

 

이제 자바스크립트는 자체적으로 API 요청을 하기위한 방법이 생겼습니다. Fetch API는 Promise로 서버 요청을 할 수 있는 새로운 표준이 되었습니다. (여기에는 추가 기능도 물론 포함됩니다.)

 

이번 튜토리얼에서, 당신은 Fetch API를 사용해서 GET과 POST 요청을 날려볼 수 있습니다.

 

튜토리얼 전제 조건

 

이번 튜토리얼을 끝내기 위해서, 다음 사항을 따라주세요.

 

1. Node.js의 로컬 개발환경 구축

2. 자바스크립트 기초지식

3. 자바스크립트의 Promise에 대한 이해

 

STEP 1. Fetch API 구문 시작하기

 

 Fetch API를 사용하는 방법 중 하나는 fetch() API의 URL을 매개변수(parameter)로 전달하는 것입니다.

fetch(url)

fetch() 메서드는 Promise를 반환합니다.

fetch()메서드 뒤에, Promise 메서드를 포함시킵니다. then() :

 

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

반환된 Promise가 resolve라면, then() 메서드 안쪽에 있는 function이 실행됩니다.

이 function은 API로부터 받은 데이터를 처리하기 위한 코드를 포함하고 있습니다.

 

then() 메서드 뒤에, catch() 메서드를 포함시킬 경우:

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

fetch()를 사용해서 호출한 API가 중단되거나 다른 에러가 발생할 수 있습니다.

이럴 경우, reject promise가 반환됩니다.

catch 메서드는 거부된 promise를 처리하는데 쓰입니다.

우리가 선택한 API를 호출할 때 에러가 발생했을 경우, catch() 안의 코드가 실행됩니다.

 

Fetch API를 사용하는 구문을 이해하면, 이제 실제 API에서 fetch()를 쓰는 쪽으로 가게 됩니다. 

STEP 2. Fetch를 사용해서, API에서 데이터 가져오기 

다음 코드 샘플은 JSONPlaceholder API를 기반으로 합니다.

API를 사용하면 10명의 user 데이터를 얻고, 자바스크립트를 사용해서 페이지에 표시할 수 있습니다.

이번 튜토리얼은 JSONPlaceholder API에서 데이터를 검색 후, 작성자의 목록에 list items 형태로 표시합니다.

 

authors.html 파일

 

1. HTML 파일을 생성하고, h1 태그와 ul태그(id = "authors")를 적어줍니다.

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

 

2. HTML파일 하단에 script 태그를 추가합니다. 

DOM 셀렉터를 이용해서 ul태그를 잡아줍니다. 이때 authors를 getElementById로 잡아줍니다. 

 

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

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

▶ ul태그의 ID인 authors

 

 

3. 다음으로, list를 생성해줍니다. (DocumentFragment)

<script>
  // ...

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

 

4. 덧붙인 list item들이 list에 추가됩니다. 

DocumentFragment는 활성화된 document 의 트리 구조에 속하지 않습니다. 

추후 Document Object Mode를 변경할 때, 성능에 영향을 미치지 않는다는 이점이 있습니다. 

API url을 보유한 url이라는 const 변수를 생성합니다. 해당 API url은 10명의 user를 반환합니다. 

<script>
  // ...

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

5. 이제 Fetch API를 써서, url을 인수로 사용해서 JSONPlaceholder API를 호출합니다. 

<script>
  // ...

  fetch(url)
</script>

Fetch API를 호출하고, URL을 JSONPlaceholder API에 전달합니다. 

그리고 나서, 응답을 받습니다. response(응답)는 JSON이 아니라, 하나의 객체입니다.

 

 response는 일련의 메서드가 있는 객체입니다. 

당신이 무엇을 하고 싶은지에 따라 쓸 수 있는 메서드들을 포함합니다. 

반환된 객체를 JSON으로 전환하려면, json() 메서드를 사용하세요.

 

6. response를 매개변수로 가진 function이 포함된, then() 메서드를 추가합니다. ↓

<script>
  // ...

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

 

7. response 매개변수는 fetch(url)에서 반환된 객체의 값을 가져옵니다. 

응답(response)을 JSON데이터로 변환시, json() 메서드를 사용해주세요.

<script>
  // ...

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

 

8. JSON 데이터는 아직 처리가 더 필요합니다.

data인자가 있는 function이 포함된, 다른 then()문을 추가합니다.

<script>
  // ...

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

 

9. 함수 안에, data와 동일한 값의 let authors 변수를 생성합니다.

<script>
  // ...

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

 

10. let authors의 각 작성자에 대해,
이름을 표시하는 list item을 생성할 수 있습니다.
map() 메서드가 이 패턴에 적합합니다.

<script>
  // ...

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

      authors.map(function(author) {

      });
    })
</script>

 

11. map 함수 내부에서, createElement로 li태그, h2태그, 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>

 

12. h2 요소는 작성자 이름(author.name)이 포함됩니다. 

span 요소에는 작성자 이메일(author.email)이 들어갑니다. 

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>

 

13. 다음으로, DOM 요소를 appendChild와 연결합니다.

 

각 list-item들이 DocumentFragment list에 추가됩니다. map 함수가 완료되면 list가 ul태그로 추가됩니다. →   ul.appendChild(list);

<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>

 

14. 2개의 then() 안의 함수들이 완료되고, catch() 함수를 추가할 수 있습니다. 

catch로, 콘솔의 잠재적인 에러들을 잡을 수 있습니다.

<script>
  // ...

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

  // ...
</script>

반응형

15. 지금까지 작성한 '요청을 위한'(request) 전체 code입니다.

<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 요청을 수행해봅시다.

STEP 3. POST요청 처리하기 

Fetch는 디폴트로, GET 요청을 가져옵니다. 그러나 우리는 다른 모든 타입의 요청을 사용 가능합니다. (header를 변경하고, data를 보낼 수 있습니다.)
POST 요청을 생성해봅시다.

 

new-author.js 파일

1. 먼저 JSONPlaceholder API 링크를 보유한 const 변수를 생성합니다.

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

 

2. 다음으로 객체를 설정해서, fetch 함수의 2번째 인자로 전달해줍니다. 
key와 value값을 지닌 data라는 객체입니다.

// ...

let data = {
  name: 'Sammy'
}

 

3. 이것은 POST 요청이기 때문에, 명확하게 써줘야 합니다.
fetchData라는 객체를 만들어주세요.

// ...

let fetchData = {

}

 

4. 이 객체는 3가지 key값이 필요합니다.
method, body, headers

 

메서드의 key값은 'POST'입니다. body는 data 객체를 JSON.stringify()로 변환시켜줍니다. 
header는  'Content-Type': 'application/json; charset=UTF-8' 입니다.

 

header interface는 Fetch API 속성입니다. HTTP 요청과 응답 header에 대한 작업을 수행할 수 있습니다.

 

이 코드가 적용되면 POST 요청을 Fetch API를 사용해서 만들 수 있습니다.

// ...

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

 

5. fetch POST요청에 대한 인자로 url, fetchData가 들어갑니다.

// ...

fetch(url, fetchData)

 

6. then() 함수 안에, JSONPlaceholder API에서 받은 응답을 처리하는
코드를 써줍니다.

// ...

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

 

7. 'POST 요청' 전체 코드입니다.

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
  });

 

 

 

new-author-request.js 파일

8. Request 객체로, fetch()를 전달하는 방법도 있습니다.

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 객체는 url과 fetchDat를 대체하는
fetch()의 인자로 사용될 수 있습니다.

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

결론

Fetch API가 모든 브라우저에서 지원되진 않지만, 
XMLHttpRequest의 훌륭한 대안책입니다.

React를 사용하여, Web API를 호출하는 방법도 존재합니다.