API 시작 가져오기

API 시작 가져오기

2022-06-01 last update

20 minutes reading JavaScript
Fetch는 새로운 프로미스 기반 API로 XMLHttpRequest와 관련된 모든 번거로움 없이 Ajax 요청을 실행할 수 있도록 합니다.본고에서 보듯이 Fetch는 사용과 사용이 매우 쉽고 API에서 자원을 얻는 과정을 크게 간소화합니다.또한 현재 모든 현대 브라우저에서 지원되기 때문에 Fetch를 사용하는 것은 정말 쉽다.

요청 가져오기


JSONPlaceholder API에서 가상 데이터를 가져와서 간단한 GET 요청을 보여 드리겠습니다.
fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(res => res.map(user => user.username))
  .then(userNames => console.log(userNames));
출력은 다음과 같은 사용자 이름 그룹입니다.
["Bret", "Antonette", "Samantha", "Karianne", "Kamren", "Leopoldo_Corkery", "Elwyn.Skiles", "Maxime_Nienow", "Delphine", "Moriah.Stanton"]
우리가 JSON 응답을 필요로 하는 것을 고려하면, 우선 JSON () 방법을 호출하여 응답 대상을 상호작용할 수 있는 대상으로 전환해야 한다.XML 응답이 필요한 경우 text() 를 사용할 수 있습니다.

요청의 게시, 배치 및 삭제


GET 이외의 요청을 보내려면 객체를 두 번째 매개 변수로 fetch 호출에 전달하고 사용할 방법과 필요한 헤더와 요청 본문을 사용합니다.
const myPost = {
  title: 'A post about true facts',
  body: '42',
  userId: 2
}

const options = {
  method: 'POST',
  body: JSON.stringify(myPost),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(res => res.json())
  .then(res => console.log(res));
JSONPlaceholder는 게시된 데이터를 전송하고 다음 ID를 첨부합니다.
Object {
  body: 42,
  id: 101,
  title: "A post about true facts",
  userId: 2
}
요청 주체는 stringified 이어야 합니다.다른 추출 호출에 사용할 수 있는 방법은 DELETE, PUT, HEAD 및 OPTIONS

오류 처리


함정이 하나 있다(쌍관어)😉) Fetch API를 사용하여 오류 처리를 할 때: 끝점을 정확하게 명중하고 되돌려 달라고 요청하면 오류가 발생하지 않습니다.이것은 오류 처리가fetch 약속 체인의 끝에 있는catch 호출처럼 간단하지 않다는 것을 의미한다.
다행히도fetch가 호출한 응답 대상에는 ok 속성이 있습니다. 요청의 성공 여부에 따라 이 속성은true나false입니다.그리고 너는 약속을 사용할 수 있다.ok가 false이면 ():
fetch('https://jsonplaceholder.typicode.com/postsZZZ', options)
  .then(res => {
    if (res.ok) {
      return res.json();
    } else {
      return Promise.reject({ status: res.status, statusText: res.statusText });
    }
  })
  .then(res => console.log(res))
  .catch(err => console.log('Error, with message:', err.statusText));
위의 예시에서 우리의 약속은 거부될 것이다. 왜냐하면 우리는 존재하지 않는 단점을 사용하고 있기 때문이다.적중력 체인catch를 호출하여 다음 내용을 출력합니다.
"Error, with message: Not Found"

가져오기 + 비동기식 / 대기


Fetch는promise 기반의 API이기 때문에 비동기 함수를 사용하는 것은 좋은 선택이며 코드를 추리하고 동기화하기 쉽게 할 수 있다.예를 들어, 간단한 GET 요청을 실행하고 되돌아오는 JSON 응답에서 사용자 이름을 추출하여 콘솔에 결과를 기록하는 비동기식/대기 함수가 있습니다.
async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);
  let data = await res.json();

  data = data.map(user => user.username);

  console.log(data);
}

fetchUsers('https://jsonplaceholder.typicode.com/users');
또는, async/await 함수에서 약속을 되돌려주고, 함수를 호출한 후에 호출을 계속 연결할 수 있습니다.
async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);
  const data = await res.json();

  return data;
}

fetchUsers('https://jsonplaceholder.typicode.com/users')
  .then(data => {
    console.log(data.map(user => user.username));
  });
json () 을 호출하면 약속을 되돌려줍니다. 따라서 위의 예시에서 우리가 return data 비동기 함수에 있을 때 약속을 되돌려줍니다.
그리고 ok가false로 응답하면 오류를 던지고 평소와 같이 약속 체인에서 오류를 포착할 수 있습니다.
async function fetchUsers(endpoint) {
  const res = await fetch(endpoint);

  if (!res.ok) {
    throw new Error(res.status); // 404
  }

  const data = await res.json();
  return data;
}

fetchUsers('https://jsonplaceholder.typicode.com/usersZZZ')
  .then(data => {
    console.log(data.map(user => user.website));
  })
  .catch(err => console.log('Ooops, error', err.message));
Ooops, error 404

다각형 채우기

  • Internet Explorer 11과 같은 이전 브라우저를 지원하려면 Fetch polyfilllike this one from Github을 사용해야 합니다.
  • Fetch-in 노드를 사용해야 하는 경우js, 두 가지 가장 유행하는 옵션은 isomorphic-fetchnode-fetch이다.
  • 브라우저 지원
    Can I Use fetch? caniuse.com 주요 브라우저에서 기능 지원에 대한 데이터입니다.