Fetch API에 대한 전체 가이드

이것은 많은 사이트에서 본 것과 같은 평균적인 블로그 게시물이 아닙니다. 이것은 새롭고 놀라운 것입니다.

가져오기 API는 브라우저에서 비동기 HTTP 요청을 만들기 위한 약속 기반 JavaScript API입니다.

Promise를 사용하여 서버에서 리소스를 가져오는 강력하고 유연한 기능 세트를 제공하는 간단하고 깨끗한 API입니다.

가져오기 API를 사용하는 방법?

가져오기 API를 사용하는 것은 정말 간단합니다. 가져오려는 리소스의 경로인 URL을 **fetch() **메서드에 전달하기만 하면 됩니다.

fetch( 'URL' )
      .then( red => {
                 // handle response data
  })
  .catch( err => {
                 // handle errors
  });

Read More => filter() method explained

요청 받기

기본적으로 가져오기 API는 비동기 요청에 GET 메서드를 사용합니다. 아주 간단한 예를 보자. 여기서 우리는 fetch()를 사용하여 "Dummy API"에 요청을 할 것입니다.

const url = "http://dummy.restapiexample.com/api/v1/employees"; 
fetchurl()
     .then(res => {
            console.log(res);
})
      .catch(err => {
             console.log('Error: ${err}' ); 
});

Dummy API is a fake API service for testing and prototyping

게시물 요청하기

Fetch는 POST, PUT, DELETE, HEAD 및 OPTIONS와 같은 요청의 다른 HTTP 메서드에도 사용할 수 있습니다. 여러분이 해야 할 일은 fetch() 옵션에서 메서드와 본문 매개변수를 설정하는 것뿐입니다.

const url = 'http://dummy.restapiexample.com/api/v1/create'
const user = {
      name: 'Rahul'
      age: '16'
      salary: '000'
};

const options = {
   method: 'POST'
   body: JSON.stringify(user), 
}

fetch(url, options)
     .then( res => res.json())
     .then( res=> console.log(res));

Read more => map() method explained

오류 처리

catch() 메서드는 요청을 실행하는 동안 발생하는 모든 오류를 가로챌 수 있습니다. 그러나 fetch()에 의해 반환된 약속은 404 또는 500과 같은 HTTP 오류를 거부하지 않습니다. 이를 위해 응답 개체의 "ok"속성을 사용할 수 있습니다.

const url = "http://dummy.restapiexample.com/api/v1/employee/40";
fetch(url) //404 error
     .then( res => {
          if (res.ok) {
                return res.json( );
          } else {
                return Promise.reject(res.status); 
           }
      })
      .then(res => console.log(res))
      .catch(err => console.log('Error with message: ${err}') ); 

가져오기 및 비동기/대기

가져오기는 Promis 기반 API이므로 한 단계 더 나아가 ES2017 async/await 구문을 사용하여 코드를 더 간단하게 만들 수 있습니다.

const url = 'http://dummy.restapiexample.com/api/v1/employees'; 
const fetchUsers = async () => {
    try {
       const res = await fetch(url);
     // check for 404 error
       if (!res.ok) { 
           throw new Error(res.status);
       }
       const data = await res.json();
          console.log(data);
       }
       // catch block for network errors
       catch (error) { 
            console.log(error); 
        }
}
fetchUsers( );

도움이 필요합니다

기계식 키보드 구매를 위한 기금 모금에 도움이 필요합니다. 이 팬데믹은 우리 가족에게 심하게 영향을 미쳤기 때문에 아빠에게 요청할 수 없습니다. 도와주세요.







⚡해피코딩 | 읽어주셔서 감사합니다😀.