React
AJAX 호출에 응답

HTTP GET 요청

때로는 컴포넌트가 원격 엔드 포인트 (예 : REST API)에서 일부 데이터를 렌더링해야하는 경우가 있습니다. 표준 실습 은 componentDidMount 메소드에서 이러한 호출을 수행하는 것입니다.

다음은 AJAX 도우미로 superagent 를 사용하는 예입니다.

import React from 'react'
import request from 'superagent'

class App extends React.Component {
  constructor () {
    super()
    this.state = {}
  }
  componentDidMount () {
    request
      .get('/search')
      .query({ query: 'Manny' })
      .query({ range: '1..5' })
      .query({ order: 'desc' })
      .set('API-Key', 'foobar')
      .set('Accept', 'application/json')
      .end((err, resp) => {
        if (!err) {
          this.setState({someData: resp.text})
        }
      })
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

요청은 request 객체에 대해 적절한 메소드를 호출 한 다음 .end() 를 호출하여 요청을 전송함으로써 시작될 수 있습니다. 헤더 필드를 설정하는 것은 간단합니다. 필드 이름과 값으로 .set() 을 호출하십시오.

.query() 메서드는 GET 메서드와 함께 사용할 때 쿼리 문자열을 형성하는 개체를 허용합니다. 다음은 /search?query=Manny&range=1..5&order=desc 경로를 생성합니다.

POST 요청

request.post('/user')
  .set('Content-Type', 'application/json')
  .send('{"name":"tj","pet":"tobi"}')
  .end(callback)

자세한 내용은 Superagent 문서 를 참조하십시오.

제 3 자 라이브러리가없는 React의 Ajax - 일명 VanillaJS

다음은 IE9 +에서 작동합니다.

import React from 'react'

class App extends React.Component {
  constructor () {
    super()
    this.state = {someData: null}
  }
  componentDidMount () {
    var request = new XMLHttpRequest();
    request.open('GET', '/my/url', true);
    
    request.onload = () => {
      if (request.status >= 200 && request.status < 400) {
        // Success!
        this.setState({someData: request.responseText})
      } else {
        // We reached our target server, but it returned an error
        // Possibly handle the error by changing your state.
      }
    };
    
    request.onerror = () => {
      // There was a connection error of some sort.
      // Possibly handle the error by changing your state.
    };
    
    request.send();
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

HTTP GET 요청 및 데이터 루핑

다음의 예는, 리모트 소스로부터 취득한 데이터 세트를 컴퍼넌트에 렌더링하는 방법을 나타내고 있습니다.

대부분의 브라우저에 내장 된 fetch 사용하여 AJAX 요청을합니다. 프로덕션 환경 에서 이전 버전의 브라우저를 지원하기 위해 polyfill fetch 사용하십시오. 요청을하기 위해 다른 라이브러리 (예 : axios , SuperAgent 또는 일반 자바 스크립트)를 사용할 수도 있습니다.

수신 한 데이터를 구성 요소 상태로 설정하므로 render 메소드 내에서 액세스 할 수 있습니다. 거기에서 우리는 map 사용하여 데이터를 반복합니다. React의 렌더링 성능에 중요한 루프 된 요소에 항상 고유 key 속성 (또는 prop)을 추가하는 것을 잊지 마십시오.

import React from 'react';

class Users extends React.Component {
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
    fetch('/api/users')
      .then(response => response.json())
      .then(json => this.setState({ users: json.data }));
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        {
          this.state.users.length == 0
            ? 'Loading users...'
            : this.state.users.map(user => (
              <figure key={user.id}>
                <img src={user.avatar} />
                <figcaption>
                  {user.name}
                </figcaption>
              </figure>
            ))
        }
      </div>
    );
  }
}

ReactDOM.render(<Users />, document.getElementById('root'));

JSBin에 대한 실제 예제 .