React
AJAX कॉल को पुनः सक्रिय करें

HTTP जीईटी अनुरोध

कभी-कभी किसी घटक को दूरस्थ समापन बिंदु (उदाहरण के लिए REST API) से कुछ डेटा रेंडर करने की आवश्यकता होती है। एक मानक अभ्यास के लिए इस तरह के कॉल करने के लिए है componentDidMount विधि।

यहाँ एक उदाहरण है, AJAX सहायक के रूप में अतिशयोक्ति का उपयोग करते हुए:

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 विधि के साथ उपयोग किए जाने पर एक क्वेरी-स्ट्रिंग .query() । निम्नलिखित पथ / /search?query=Manny&range=1..5&order=desc करेंगे /search?query=Manny&range=1..5&order=desc ।

पोस्ट अनुरोध

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

अधिक विवरण के लिए Superagent डॉक्स देखें।

तीसरी पार्टी लाइब्रेरी के बिना रिएक्ट में अजाक्स - वेनिलाजेएस के साथ उर्फ

निम्नलिखित 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 अनुरोध करते हैं, जो अधिकांश ब्राउज़रों में निर्मित होता है। एक का प्रयोग करें fetch polyfill उत्पादन में पुराने ब्राउज़र का समर्थन करने के। आप अनुरोध करने के लिए किसी भी अन्य पुस्तकालय का उपयोग भी कर सकते हैं (जैसे axios , SuperAgent , या यहां तक कि सादे जावास्क्रिप्ट)।

हम प्राप्त डेटा को घटक स्थिति के रूप में सेट करते हैं, इसलिए हम इसे रेंडर विधि के अंदर एक्सेस कर सकते हैं। वहां, हम map का उपयोग करके डेटा के माध्यम से लूप करते हैं। हमेशा लूप वाले तत्व के लिए एक अद्वितीय key विशेषता (या प्रोप) जोड़ना न भूलें, जो कि रिएक्ट के रेंडरिंग प्रदर्शन के लिए महत्वपूर्ण है।

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'));

जेएसबीएन पर काम करने का उदाहरण ।