reactjs에서 Restful API 사용하기

반응 개발자이고 restapi 사용에 대해 자세히 알고 싶거나 restapi 사용에 문제가 있는 경우 이 문서가 적합합니다.
Rest API는 반응 애플리케이션에서 사용자와 데이터를 가져오고 사용자로부터 데이터를 가져오는 데 사용하는 엔드포인트로 정의할 수 있습니다. 클라이언트와 백엔드 간의 연결을 만드는 데 매우 유용합니다. 프런트엔드 애플리케이션에서 엔드포인트를 호출하여 애플리케이션 사용자가 데이터베이스에 요청을 하고 싶을 때 쉽게 그렇게 할 수 있습니다.

반응에서 REST API를 사용하는 것은 다양한 방법으로 수행할 수 있습니다. 그러나 이 기사에서는 Axios(약속 기반 HTTP 클라이언트) 및 Fetch API(브라우저 내장 웹 API)로 알려진 두 가지 가장 인기 있는 방법에 대해 논의할 것입니다.

참고:_ ReactJS, React Hooks, JavaScript 및 CSS에 대한 지식이 있으면 이 게시물의 내용을 작업하는 데 도움이 됩니다._

가져오기 API 사용

fetch() 메서드는 서버 또는 API 끝점에서 리소스를 가져오기 위한 내장된 Javascript 메서드입니다. 이 메서드는 항상 가져오려는 리소스의 경로를 포함하는 필수 URL 인수를 받고 다음을 가리키는 약속을 반환합니다. 요청의 응답 날씨 성공 여부.

Fetch API에 사용할 수 있는 매개변수

리소스: 가져올 리소스의 경로가 포함된 URL입니다.

헤더
일반적으로 객체 또는 객체 리터럴에 포함된 요청에 추가하려는 헤더를 지정하기 위한 것입니다.

본체
이는 요청에 추가하려는 본문을 지정하기 위한 것입니다. 이는 Blob, BufferSource, FormData, URLSearchParams, USVString 또는 ReadableStream 개체일 수 있습니다.

모드
이는 요청에 사용할 모드(예: cors, no-cors 또는 same-origin)를 지정하기 위한 것입니다.

자격 증명
요청에 사용할 요청 자격 증명을 지정하기 위한 것입니다. 현재 도메인에 대해 쿠키를 자동으로 보내는 것을 고려하는 경우 이 옵션을 제공해야 합니다.

가져오기 요청 구문

fetch('https://github.com/Marriane791?tab=repositories')
  .then(response => response.json())
  .then(data => console.log(data));

위의 코드에서 개인 github 리포지토리를 예제 url로 사용했습니다. 응답은 실제 JSON이 아닌 일반적인 HTTP 응답입니다. 응답에서 JSON 본문 콘텐츠를 가져오려면 응답에서 json() 메서드를 사용하여 응답을 실제 JSON으로 변경해야 합니다.

축 사용
Axios()는 javscript에서 api 끝점을 가져올 때 일반적으로 선호되는 약속 기반 메서드입니다. 약속 기반 메서드이므로 아래에서 볼 수 있는 것처럼 비동기 대기를 활용하여 요청을 만듭니다. Axios에는 in도 포함되어 있습니다. -클라이언트 간 교차 사이트 사기를 방지하는 내장 기능입니다. 또한 다음을 가능하게 합니다.

간소화된 오류 처리.

요청 및 응답 가로채기.

업로드 진행률.

응답 시간이 초과되었습니다.

요청 취소
몇 가지만 언급하겠습니다. 구문에는 다음이 포함됩니다.

axios.post(url,{data}).then(response => {
console.log(response.data)
});

이제 브라우저에서 애플리케이션을 자유롭게 볼 수 있습니다. 마우스 오른쪽 버튼을 클릭한 다음 코드를 검사하여 API에서 가져오는 실제 데이터를 볼 수 있습니다.
예시:


이것은 의사들이 서로 채팅할 수 있도록 하는 진단 질병 예측here이라는 애플리케이션에서 만든 코드 스니펫의 예입니다.
getChats 메서드에는 엔드포인트에서 데이터를 가져오는 모든 논리가 포함되어 있습니다. 이 메서드는 useEffect 메서드에서 호출되고 구현이 계속됩니다.