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

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

2022-05-31 last update

54 minutes reading

소개


API 요청을 보내는 데 사용된 적이 있습니다.그것은 약속도 포함하지 않았고, 깨끗한 자바스크립트 코드도 생성하지 않았다.jQuery를 사용하면 XMLHttpRequest 보다 간결한 문법을 사용할 수 있습니다.
이제 JavaScript는 자체 내장 방식으로 API 요청을 실행합니다.이것이 바로 Fetch API입니다. 이것은 약속된 서버 요청을 보내는 데 사용되는 새로운 표준이지만 다른 기능도 포함됩니다.
이 강좌에서는 Fetch API를 사용하여 GET 및 POST 요청을 작성합니다.

선결 조건


이 강좌를 완성하려면 다음과 같은 내용이 필요합니다.
  • 노드의 로컬 개발 환경.js.따른다How to Install Node.js and Create a Local Development Environment.
  • JavaScript 인코딩에 대한 기본적인 이해는 How to Code in JavaScript 시리즈에서 더 많이 알 수 있습니다.
  • JavaScript의 약속에 대해 알아보십시오.본문 Promises sectionthe event loop, callbacks, Promises, and async/await 을 JavaScript 로 읽습니다.
  • 1단계 - API 구문 가져오기 시작


    Fetch API를 사용하는 방법 중 하나는 API의 URL을 매개 변수로 전달하는 것입니다jQuery.ajax().
    fetch(url)
    
    fetch() 방법은 약속을 되돌려준다.fetch() 방법 다음에 Promise 방법fetch()을 포함합니다.
    fetch(url)
      .then(function() {
        // handle the response
      })
    
    약속이 then() 이면 resolve 방법의 함수를 실행합니다.이 함수는 API에서 수신된 데이터를 처리하는 코드를 포함합니다.then() 방법 다음then() 방법 포함:
    fetch(url)
      .then(function() {
        // handle the response
      })
      .catch(function() {
        // handle the error
      });
    
    catch()를 사용하여 호출한 API가 종료되었거나 다른 오류가 발생할 수 있습니다.만약 이런 상황이 발생한다면 fetch() 약속으로 돌아갈 것이다.reject 방법은 처리에 사용됩니다catch.선택한 API를 호출하는 동안 오류가 발생하면 reject 의 코드가 실행됩니다.
    Fetch API를 사용하는 구문을 이해하면 현재 실제 API에서 사용할 수 있습니다catch().

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


    다음 코드 예는 JSONPlaceholder API 을 기반으로 합니다.API를 사용하면 10명의 사용자를 얻을 수 있으며 JavaScript를 사용하여 페이지에 표시됩니다.이 강좌는 JSON Placeholder API에서 데이터를 검색하여 작성자 목록의 목록 항목에 표시합니다.
    먼저 HTML 파일을 만들고 제목과 무질서 목록을 추가합니다. 여기서 fetch()id 입니다.
    저자html
    <h1>Authors</h1>
    <ul id="authors"></ul>
    
    HTML 파일의 하단에 authors 태그를 추가하고 DOM 선택기를 사용하여 가져옵니다script. ul getElementById 를 매개변수로 사용합니다.
    저자html
    <h1>Authors</h1>
    <ul id="authors"></ul>
    
    <script>
      const ul = document.getElementById('authors');
    </script>
    
    authors는 이전에 생성된 authors id 임을 기억하십시오.
    다음으로 ul, 즉 list 을 생성합니다.
    저자html
    <script>
      // ...
    
      const list = document.createDocumentFragment();
    </script>
    
    추가된 모든 목록 항목이 DocumentFragment 에 추가됩니다.list는 활성 문서 트리 구조의 일부가 아닙니다.이렇게 하면 문서 대상 모델을 변경할 때 성능에 영향을 주는 그림을 다시 그리지 않는다는 것이 장점이다.
    API URL이 저장되고 10개의 무작위 사용자에게 반환되는 상수 변수DocumentFragment를 만듭니다.
    저자html
    <script>
      // ...
    
      const url = 'https://jsonplaceholder.typicode.com/users';
    </script>
    
    현재 Fetch API를 사용하여 urlfetch() 매개변수로 JSONPlaceholder API를 호출합니다.
    저자html
    <script>
      // ...
    
      fetch(url)
    </script>
    
    Fetch API를 호출하여 JSONPlaceholder API에 URL을 전달하는 중입니다.그리고 응답을 받습니다.그러나 사용자가 얻은 응답은 JSON이 아니라 정보에 대해 실행하고자 하는 조작에 따라 사용할 수 있는 일련의 방법을 가진 대상입니다.반환된 객체를 JSON으로 변환하려면 url 메서드를 사용합니다.json() 메서드를 추가하면 then() 라는 매개변수의 함수가 포함됩니다.
    저자html
    <script>
      // ...
    
      fetch(url)
        .then((response) => {})
    </script>
    
    response 매개변수는 response 에서 반환된 객체의 값을 가져옵니다.fetch(url) 메서드를 사용하여 json() 를 JSON 데이터로 변환합니다.
    저자html
    <script>
      // ...
    
      fetch(url)
        .then((response) => {
          return response.json();
        })
    </script>
    
    JSON 데이터는 여전히 처리되어야 합니다.response 라는 매개변수를 포함하는 다른 then() 문을 추가합니다.
    저자html
    <script>
      // ...
    
      fetch(url)
        .then((response) => {
          return response.json();
        })
        .then((data) => {})
    </script>
    
    이 함수에서 data 라는 변수를 생성합니다. 이 변수는 authors 로 설정됩니다.
    저자html
    <script>
      // ...
    
      fetch(url)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          let authors = data;
        })
    </script>
    
    data의 모든 작성자에 대해 이름을 표시하는 목록 항목을 만들어야 합니다. authors method 모델:
    저자html
    <script>
      // ...
    
      fetch(url)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          let authors = data;
    
          authors.map(function(author) {
    
          });
        })
    </script>
    
    map() 함수에서 map 라는 변수를 생성합니다. 이 변수는 li , 매개변수는 createElement (HTML 요소) 로 설정됩니다.또한 li 생성h2name 생성span:
    저자html
    <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>
    
    email원소는 h2name를 포함할 것이다.author 요소에는 span 전자 메일이 포함됩니다.author 속성 및 문자열 보간으로 다음을 수행할 수 있습니다.
    저자html
    <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 요소를 연결합니다 innerHTML .
    저자html
    <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>
    
    각 목록 항목은 appendChild DocumentFragment 에 첨부됩니다.list이 완료되면 map 무질서 목록 요소에 추가됩니다.
    두 개list 함수를 완성하면 ul 함수를 추가할 수 있습니다.이 함수는 콘솔에 잠재적인 오류를 기록합니다.
    저자html
    <script>
      // ...
    
      fetch(url)
        .then((response) => {
          // ...
        })
        .then((data) => {
          // ...
        })
        .catch(function(error) {
          console.log(error);
        });
    
      // ...
    </script>
    
    이것은 사용자가 만든 요청의 전체 코드입니다.
    저자html
    <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 요청 처리


    Fetch는 기본적으로 요청을 가져오지만 다른 모든 종류의 요청을 사용하고 헤더를 변경하고 데이터를 보낼 수 있습니다.POST 요청을 작성합니다.
    먼저 JSONPlaceholder API에 대한 링크를 저장하는 상수 변수를 포함합니다.
    신진 작가.회사 명
    const url = 'https://jsonplaceholder.typicode.com/users';
    
    다음은 대상을 설정하고fetch 함수의 두 번째 매개 변수로 전달해야 합니다.키 then() 및 값 catch() (또는 이름) 이 있는 data 이라는 객체가 됩니다.
    신진 작가.회사 명
    // ...
    
    let data = {
      name: 'Sammy'
    }
    
    POST 요청이므로 명확하게 설명해야 합니다.name라는 객체를 만듭니다.
    신진 작가.회사 명
    // ...
    
    let fetchData = {
    
    }
    
    이 객체에는 Sammy, fetchDatamethod 세 개의 키가 필요합니다.
    신진 작가.회사 명
    // ...
    
    let fetchData = {
      method: 'POST',
      body: JSON.stringify(data),
      headers: new Headers({
        'Content-Type': 'application/json; charset=UTF-8'
      })
    }
    
    body 키의 값은 headers 입니다.method 는 새로 작성된 'POST' 객체의 body 형식으로 설정됩니다.JSON.stringify()의 값은 data 입니다.headers 인터페이스는 Fetch API의 속성으로 HTTP 요청 및 응답 헤더에 대해 작업을 수행할 수 있습니다.How To Define Routes and HTTP Request Methods in Express라는 이 글은 당신에게 더 많은 정보를 제공할 수 있습니다.
    이 코드가 있으면 Fetch API를 사용하여 POST 요청을 보낼 수 있습니다.'Content-Type': 'application/json; charset=UTF-8'Headersurl POST 요청의 매개 변수로 포함합니다.
    신진 작가.회사 명
    // ...
    
    fetch(url, fetchData)
    
    fetchData 함수에는 JSON Placeholder 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 하나 then() 의 대상을 전달할 수 있다.
    새 작성자 요청회사 명
    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
      });
    
    이 방법을 사용하면 fetch() Request 의 유일한 매개 변수, 교체 requestfetch() 로 사용할 수 있다.
    이제 Fetch API를 사용하여 POST 요청을 작성하고 실행하는 두 가지 방법을 알 수 있습니다.

    결론


    모든 브라우저가 Fetch API를 지원하는 것은 아니지만 url 의 좋은 대체품이다.
    Reactcheck out this article를 사용하여 이 주제에서 웹 API를 호출하는 방법을 알고 싶으시면