ReactJS kodundan dinlenme sonrası araması nasıl yapılır?

ReactJS ve UI'de yeniyim ve ReactJS kodundan basit bir REST tabanlı POST çağrısının nasıl yapılacağını öğrenmek istedim.

Herhangi bir örnek varsa, gerçekten yardımcı olacaktır.

Doğrudan React belgelerinden :

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

(Bu JSON yayınlamaktır, ancak örneğin multipart-form da yapabilirsiniz.)

React'in REST aramalarını nasıl yaptığınız konusunda gerçekten bir fikri yok. Temel olarak, bu görev için istediğiniz türden AJAX kitaplığını seçebilirsiniz.

Eski düz JavaScript ile en kolay yol muhtemelen şuna benzer:

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

Modern tarayıcılarda da kullanabilirsiniz fetch .

REST çağrıları yapan daha fazla bileşene sahipseniz, bu tür bir mantığı, bileşenler arasında kullanılabilecek bir sınıfa koymak mantıklı olabilir. ÖrneğinRESTClient.post(…)

Son zamanlarda popüler olan bir başka paket ise: axios

Yüklemek : npm install axios --save

Basit Söz temelli istekler

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

süper ajan yükleyebilirsin

npm install superagent --save

sonra sunucuya arama sonrası yapmak için

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

2018 ve sonrasında, ReactJS uygulamanıza async / await'i dahil etmek için daha modern bir seçeneğiniz var. Aksiyolar gibi vaat temelli bir HTTP istemci kitaplığı kullanılabilir. Örnek kod aşağıda verilmiştir:

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) {
           ...
        }
    }
    ...
}

Bunun da normal bir yol olduğunu düşünüyorum. Ama üzgünüm, İngilizce olarak tanımlayamıyorum ((

    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 / sorular', {yöntem: 'POST', başlıklar: {Kabul: 'application / json', 'Content-Type': 'application / json',}, gövde: JSON.stringify (this.state) }). sonra (response => {console.log (response)}) .catch (error => {console.log (hata)})

İşte özelliklere ve desteğe dayalı olarak ajax kitaplıkları karşılaştırmasının bir listesi. Getirmeyi yalnızca istemci tarafı geliştirme veya izomorfik getirme için hem istemci tarafı hem de sunucu tarafı geliştirmede kullanmak için kullanmayı tercih ediyorum .

İzomorfik getirme ve getirme hakkında daha fazla bilgi için

Her ikisini de almak ve göndermek için değiştirilmiş bir util işlevi (yığın üzerinde başka bir gönderi). Util.js dosyası oluşturun.

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 };

Başka bir bileşende aşağıdaki gibi kullanım

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

İşte bir örnek: 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.ajaxYöntemi kullandı, ancak onu axios, süper ajan veya getirme gibi AJAX tabanlı kitaplarla kolayca değiştirebilirsiniz.