R e c t에서 RESTFUL API를 사용하고 작업합니다.

React 애플리케이션에서 REST API를 사용하는 것은 fetch(), Axios 및 superagent를 포함한 다양한 방법으로 수행할 수 있습니다. 이 포스트에서 우리는 그것들에 대해 자세히 논의할 것입니다.
술책
fetch() API는 서버 또는 API 끝점에서 리소스를 가져오기 위한 내장 JavaScript 메서드입니다. XMLHttpRequest와 유사하지만 fetch API는 더 강력하고 유연한 기능 세트를 제공합니다.
fetch() API 메서드는 항상 필수 인수를 취합니다. 이 인수는 가져오려는 리소스의 경로 또는 URL입니다. 요청의 성공 여부에 관계없이 요청의 응답을 가리키는 약속을 반환합니다. 선택적으로 init options 객체를 두 번째 인수로 전달할 수도 있습니다.
FETCH() API 사용을 위한 기본 구문
기본 가져오기 요청은 작성하기가 정말 간단합니다. 다음 코드를 살펴보세요.

fetch('https://api.github.com/users/hacktivist123/repos')
  .then(response => response.json())
  .then(data => console.log(data));

위의 코드에서는 데이터를 JSON으로 반환하는 URL에서 데이터를 가져온 다음 콘솔에 인쇄합니다. fetch()를 사용하는 가장 간단한 형식은 가져오려는 리소스의 경로인 인수 하나만 사용하고 가져오기 요청의 응답이 포함된 약속을 반환하는 경우가 많습니다. 이 응답은 개체입니다.

응답은 실제 JSON이 아닌 일반 HTTP 응답입니다. 응답에서 JSON 본문 내용을 가져오려면 응답에서 json() 메서드를 사용하여 응답을 실제 JSON으로 변경해야 합니다.

Axios로 API 사용하기
Axios는 브라우저 및 node.js를 위한 사용하기 쉬운 약속 기반 HTTP 클라이언트입니다. Axios는 약속 기반이기 때문에 비동기를 활용하고 더 읽기 쉽고 비동기적인 코드를 기다릴 수 있습니다. Axios를 사용하면 요청을 가로채고 취소할 수 있으며 사이트 간 요청 위조에 대한 클라이언트 측 보호 기능을 제공하는 내장 기능도 있습니다.

AXIOS의 기능
요청 및 응답 가로채기
간소화된 오류 처리
XSRF에 대한 보호
업로드 진행 지원
응답 시간 초과
요청 취소 기능
이전 브라우저 지원
자동 JSON 데이터 변환
AXIOS로 요청하기
Axios로 HTTP 요청을 만드는 것은 매우 쉽습니다. 아래 코드는 기본적으로 HTTP 요청을 하는 방법입니다.

// Make a GET request
axios({
  method: 'get',
  url: 'https://api.github.com/users/hacktivist123',
});

// Make a Post Request
axios({
  method: 'post',
  url: '/login',
  data: {
    firstName: 'shedrack',
    lastName: 'akintayo'
  }
});

위의 코드는 Axios로 GET 및 POST HTTP 요청을 할 수 있는 기본 방법을 보여줍니다.

Axios는 또한 다양한 HTTP 요청을 수행하기 위한 단축 방법 세트를 제공합니다. 방법은 다음과 같습니다.

axios.request(구성)
axios.get(url[, 설정])
axios.delete(url[, 구성])
axios.head(url[, 구성])
axios.options(url[, 구성])
axios.post(url[, 데이터[, 구성]])
axios.put(url[, 데이터[, 구성]])
axios.patch(url[, 데이터[, 구성]])
예를 들어 위의 예제 코드와 비슷한 요청을 하고 싶지만 약식 메서드를 사용하면 다음과 같이 할 수 있습니다.

// Make a GET request with a shorthand method
axios.get('https://api.github.com/users/hacktivist123');

// Make a Post Request with a shorthand method
axios.post('/signup', {
    firstName: 'shedrack',
    lastName: 'akintayo'
});

위의 코드에서 우리는 위에서 했던 것과 동일한 요청을 하고 있지만 이번에는 속기 방법을 사용합니다. Axios는 유연성을 제공하고 HTTP 요청을 훨씬 더 읽기 쉽게 만듭니다.
슈퍼 에이전트
수퍼에이전트를 사용하기 위해 라이브러리를 가져올 것입니다:

npm i superagent -S

그런 다음 구성 요소에서 라이브러리를 가져옵니다.

import request from 'superagent'
class UsersComponent extends React.Component {
    constructor() {
        this.state = {
            users: [],
            done: false
        }
    }
    componentDidMount() {
        request
            .get('api/users')
            .then(res => this.setState({users: res.json(), done: true}))
            .catch(err => log(err))
    }
    render() {
        if(!this.state.done) {
            return (
                <div>
                    Users Loading 
                </div>
            )
        } else {
            return (
                <div>
                    Users: {this.state.users}            
                </div>
            )
        }
    }
}