ReactJS कोड से एक आराम पोस्ट कॉल कैसे करें?

Question

मैं ReactJS और UI के लिए नया हूं और मैं जानना चाहता था कि ReactJS कोड से एक सरल REST आधारित POST कॉल कैसे किया जाए।

यदि कोई उदाहरण मौजूद है तो यह वास्तव में मददगार होगा।

Comments

क्या आप उस उत्तर को चुन सकते हैं जिससे आपको मदद मिली?

— सुकरात

Answer 1

रिएक्ट डॉक्स से सीधे :

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

(यह JSON पोस्ट कर रहा है, लेकिन आप भी कर सकते हैं, उदाहरण के लिए, मल्टीपार्ट-फॉर्म।)

Comments

आपको इसे स्थापित करना होगा और इसे आयात करना होगा । मत भूलना, fetch()फ़ंक्शन डेटा वापस नहीं करता है , यह सिर्फ एक वादा देता है ।

— मालवोलियो

haha @Divya, मैं आपका पढ़ने से पहले एक ही टिप्पणी करने वाला था। सुनिश्चित नहीं है कि इसे React.createClass में डालें या नहीं। इसके अलावा, क्या हम प्रतिक्रिया डॉक्स के लिए एक लिंक दे सकते हैं? मैंने उनकी साइट ( facebook.github.io/react/docs/hello-world.html ) को असफल तरीके से खोजने का प्रयास किया।

— टायलर एल

क्या हम आयात को शामिल करने के लिए मूल उत्तर को संशोधित कर सकते हैं?

— टायलर एल

IMO, @amann के पास बेहतर उत्तर है । इस उत्तर का तात्पर्य fetchप्रतिक्रिया में बनाया गया है, जो यह नहीं है, और संदर्भित डॉक्स का कोई लिंक नहीं है। fetch(लेखन के समय) एक प्रायोगिक वादा आधारित एपीआई है । ब्राउज़र-संगतता के लिए, आपको एक बेबल पॉलीफिल की आवश्यकता होगी ।

— क्रिस

ध्यान दें, कि यह रिएक्टिव नेटिव डॉक्स से है, रिएक्ट JS डॉक्स से नहीं, लेकिन आप रिएक्ट JS में भी Fetch_API का उपयोग कर सकते हैं। facebook.github.io/react-native/docs/network.html

— Pål Brattberg

Answer 2

रिएक्ट में वास्तव में आपकी राय नहीं है कि आप REST कॉल कैसे करते हैं। मूल रूप से आप इस कार्य के लिए जो भी तरह की AJAX लाइब्रेरी चुन सकते हैं।

सादे पुराने जावास्क्रिप्ट के साथ सबसे आसान तरीका शायद कुछ इस तरह है:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);

आधुनिक ब्राउज़रों में भी आप उपयोग कर सकते हैं fetch।

यदि आपके पास अधिक घटक हैं जो REST कॉल करते हैं, तो इस तरह के तर्क को एक वर्ग में रखने के लिए समझ में आ सकता है जिसका उपयोग घटकों के पार किया जा सकता है। उदाहरण के लिएRESTClient.post(…)

Comments

मेरे लिए, यह सबसे अच्छा जवाब है क्योंकि प्रतिक्रिया में बनाया लेना देना नहीं है है। आप या तो आयात करने के लिए है fetchया superagentया jQueryया axiosया कुछ और है कि "प्रतिक्रिया वैनिला" का हिस्सा नहीं है क्रम क्या ऊपर पोस्ट किया जाता है के अलावा और कुछ करने के लिए ।

— vapcguy

ऐसा लगता है कि यदि आप फ्लास्क का उपयोग कर रहे हैं, तो यह करने के लिए अच्छी तरह से काम करता है JSON.stringify({"key": "val"})और फिर फ्लास्क की तरफ करते हैंrequest.get_json()

— प्रो क्यू

हां, यदि आप JSON पोस्ट कर रहे हैं, तो आपको JSON.stringifyइसे पहले करना होगा।

— amann

Answer 3

एक और हाल ही में लोकप्रिय पैकेज है: axios

इंस्टॉल : npm install axios --save

सरल वादा आधारित अनुरोध

---

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 4

आप सुपरगेंट इंस्टॉल कर सकते हैं

npm install superagent --save

तो सर्वर पर पोस्ट कॉल करने के लिए

import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
});  

Answer 5

2018 और उससे आगे के रूप में, आपके पास एक और आधुनिक विकल्प है जो आपके रिएक्टज एप्लिकेशन में एसिंक्स / वेट को शामिल करना है। एक वादा-आधारित HTTP क्लाइंट लाइब्रेरी जैसे कि axios का उपयोग किया जा सकता है। नमूना कोड नीचे दिया गया है:

import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
           const response = await axios.post('/login', { email, password });
           console.log(response);
        } catch (err) {
           ...
        }
    }
    ...
}

Comments

किसी कारण के लिए नोडज व्याख्या करते हैं await-SyntaxError: await is a reserved word (33:19)

— प्रयागपद

@prayagupd आप किस नोड के संस्करण का उपयोग कर रहे हैं?

— केविन ले - खेनले

Answer 6

मुझे लगता है कि यह तरीका भी एक सामान्य तरीका है। लेकिन क्षमा करें, मैं अंग्रेजी में वर्णन नहीं कर सकता (

    submitHandler = e => {
    e.preventDefault()
    console.log(this.state)
    fetch('http://localhost:5000/questions',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
                    'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.state)
    }).then(response => {
            console.log(response)
        })
        .catch(error =>{
            console.log(error)
        })
    
}

https://googlechrome.github.io/samples/fetch-api/fetch-post.html

fetch ('url / questions', {Method: 'POST', हेडर: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (यह .state) })। तब (प्रतिक्रिया => {कंसोल.लॉग (प्रतिक्रिया)}) .चेक (त्रुटि => {कंसोल.लॉग (त्रुटि)}))

Answer 7

यहाँ सुविधाओं और समर्थन के आधार पर अजाक्स पुस्तकालयों की तुलना की एक सूची है। मैं का उपयोग करना पसंद लाने केवल ग्राहक के पक्ष विकास या के लिए isomorphic-फ़ेच दोनों क्लाइंट पक्ष और सर्वर साइड विकास में उपयोग करने के लिए।

आइसोमोर्फिक-भ्रूण बनाम भ्रूण के बारे में अधिक जानकारी के लिए

Answer 8

प्राप्त करने और पोस्ट करने के लिए यहां एक उपयोग फ़ंक्शन संशोधित (स्टैक पर एक और पोस्ट) है। Util.js फ़ाइल बनाएँ।

let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

एक अन्य घटक में नीचे की तरह उपयोग

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }

Answer 9

यहाँ एक उदाहरण है: https://jsfiddle.net/69z2wepo/9888/

$.ajax({
    type: 'POST',
    url: '/some/url',
    data: data
  })
  .done(function(result) {
    this.clearForm();
    this.setState({result:result});   
  }.bind(this)
  .fail(function(jqXhr) {
    console.log('failed to register');
  });

इसने jquery.ajaxविधि का उपयोग किया लेकिन आप इसे आसानी से AJAX आधारित परिश्रम जैसे axios, superagent या fetch के साथ बदल सकते हैं।

Comments

उदाहरण के लिए बहुत बहुत धन्यवाद :)। मैं यह भी समझना चाहता था कि क्या मेरी सेवा को JSON प्रारूप डेटा की उम्मीद है। तब किन बदलावों की आवश्यकता होगी? किसी भी प्रकार की जानकारी वास्तव में सहायक होगी। इसलिए जब मैं कर्ल कमांड का उपयोग कर्ल -v -X POST लोकलहोस्ट: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xzz"}' जैसे समापन बिंदु को हिट करने के लिए कर रहा हूं । तो मैं इस तरह की सेवा कैसे कह सकता हूं।

— दिव्य

'{"Id":"112","User":"xyz"}'URL के साथ एक वैरिएबल नामक डेटा बनाएं और URL को लोकलहोस्ट में बदलें: 8080 / myapi / ui / start, इसके बारे में thats, एक बार XHR कॉल सफल होने के बाद आप किए गए तरीके पर उतरेंगे और आपको परिणाम के माध्यम से डेटा तक पहुंच प्राप्त होगी संपत्ति।

— सनम अग्रवाल