Jak zadzwonić po odpoczynek z kodu ReactJS?

Jestem nowy w ReactJS i UI i chciałem wiedzieć, jak wykonać proste wywołanie POST oparte na REST z kodu ReactJS.

Gdyby był jakiś przykład, byłby naprawdę pomocny.

Prosto z dokumentacji React :

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

(To jest wysyłanie JSON, ale możesz też zrobić na przykład formularz wieloczęściowy).

React tak naprawdę nie ma opinii na temat sposobu wykonywania połączeń REST. Zasadniczo do tego zadania możesz wybrać dowolną bibliotekę AJAX.

Najłatwiejszym sposobem ze zwykłym starym JavaScriptem jest prawdopodobnie coś takiego:

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

W nowoczesnych przeglądarkach można również używać fetch.

Jeśli masz więcej komponentów, które wykonują wywołania REST, sensowne może być umieszczenie tego rodzaju logiki w klasie, której można używać w komponentach. Na przykładRESTClient.post(…)

Inne ostatnio popularne pakiety to: axios

Zainstalować : npm install axios --save

Proste żądania oparte na obietnicy

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

możesz zainstalować superagenta

npm install superagent --save

następnie do wykonania połączenia pocztowego z serwerem

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

Od 2018 roku i później masz bardziej nowoczesną opcję, która polega na włączeniu async / await do aplikacji ReactJS. Można użyć opartej na obietnicy biblioteki klienta HTTP, takiej jak axios. Przykładowy kod jest podany poniżej:

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

Myślę, że w ten sposób też w normalny sposób. Ale przepraszam, nie mogę opisać po angielsku ((

    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', {metoda: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (odpowiedź)}) .catch (błąd => {console.log (błąd)})

Oto lista porównawcza bibliotek Ajax na podstawie funkcji i wsparcia. Wolę używać pobierania tylko do programowania po stronie klienta lub pobierania izomorficznego do używania zarówno po stronie klienta, jak i po stronie serwera.

Więcej informacji na temat pobierania izomorficznego vs pobierania

Oto zmodyfikowana funkcja util (kolejny post na stosie) do pobierania i wysyłania obu. Utwórz plik 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 };

Użycie jak poniżej w innym komponencie

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

Oto przykład: 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');
  });

Używał jquery.ajaxmetody, ale można ją łatwo zastąpić bibliotekami opartymi na AJAX, takimi jak axios, superagent lub fetch.