가져오는 것

이 가져오기 API는 매우 훌륭합니다. 과거에 JavaScript의 XMLHttpRequests로 작업했거나 jQuery 또는 Axios와 같은 라이브러리에 의존해야 했다면 가져오기 기능에 정말 감사할 것입니다. 가져오기는 다음과 같습니다.

간편한 설정

약속 기반

구성 가능

가장 큰 단점은 이 글을 쓰는 시점에서 제대로 지원되지 않는다는 것입니다. 따라서 이전 브라우저를 지원하려면 ployfills를 사용해야 합니다. 그동안 이 API로 손을 더럽혀야 합니다. 기본 예제부터 시작하겠습니다. JSON Placeholder을 사용하여 JSON 파일을 검색하고 들어오는 데이터를 DOM에 추가합니다.

var url = `https://jsonplaceholder.typicode.com/photos`;

getData(url)
  .then(data => {
    data.forEach( e => {
      var div = document.createElement("div"),
          content = document.createTextNode(e.title);
      div.appendChild(content);
      document.getElementById('content')
        .insertAdjacentElement('beforeend', div);
    })
  })
  .catch(error => console.error(error));

function getData(url){
  return fetch(url, {
      method: 'GET',
    })
    .then(response => response.json())
    .catch(error => console.error(`Fetch Error =\n`, error));
};

API 호출은 두 개의 매개변수를 사용합니다. 첫 번째는 서버 API 엔드포인트의 URL입니다. 두 번째는 고유한 구성을 설정할 초기화 개체입니다. 이 간단한 예제에서는 HTTP 요청 방법만 설정합니다.

위에서 언급했듯이 이것은 모두 약속 기반입니다. 이를 통해 서버에서 데이터를 검색하는 동안 코드 실행을 비동기적으로 계속할 수 있습니다. getData 함수는 서버에 GET 요청을 보냅니다. 데이터가 반환되면 연결된 then() 함수는 JSON 형식의 응답이 포함된 약속을 원래 메서드로 다시 전달하는 실행을 실행합니다. 그런 다음 이 메서드는 데이터를 가져오고 각 값을 개별적으로 DOM에 추가하는 모든 값을 반복할 수 있습니다.

이 예제에서는 GET 요청을 제출했지만 애플리케이션에 필요한 표준 메서드(GET, POST, DELETE, PUT) 중 하나를 사용할 수 있습니다.

var url = `https://jsonplaceholder.typicode.com/posts/1`;

postData(url)
  .then(data => {
    console.log('complete')
  })
  .catch(error => console.error(error));

function postData(url) {
  return fetch(url, {
    method: 'PUT',
    body: JSON.stringify({
      id: 1,
      title: 'This is a Test',
      body: 'Some Random Text',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
.then(response => response.json())
  .catch(error => console.error(`Fetch Error =\n`, error));
};

결과 출력은



액세스 제어(cors, same-origin), 캐싱 등과 같은 Fetch 메서드의 두 번째 선택적 매개 변수에 전달할 수 있는 다른 옵션이 있습니다. 이러한 옵션은 MDN Page 에 잘 설명되어 있습니다. 특정 사용 사례에 적용되는 각 항목을 자유롭게 조사하십시오.

이전에 가져오지 않은 경우 가져오기 API에 익숙해지기 위한 짧은 입문서에 불과했습니다. 바라건대 이 API는 너무 오랫동안 표준이었던 API 엔드포인트 쿼리와 관련된 낙인을 제거할 것입니다. 갓스피드.