Bagaimana cara membuat panggilan pos istirahat dari kode ReactJS?

Saya baru mengenal ReactJS dan UI dan saya ingin tahu cara membuat panggilan POST sederhana berbasis REST dari kode ReactJS.

Jika ada contoh yang hadir, itu akan sangat membantu.

Langsung dari React docs :

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

(Ini memposting JSON, tetapi Anda juga bisa melakukan, misalnya, bentuk multi-bagian.)

Bereaksi tidak benar-benar memiliki pendapat tentang bagaimana Anda membuat panggilan REST. Pada dasarnya Anda dapat memilih perpustakaan AJAX apa pun yang Anda suka untuk tugas ini.

Cara termudah dengan JavaScript lama mungkin adalah sesuatu seperti ini:

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

Di browser modern, Anda juga dapat menggunakan fetch.

Jika Anda memiliki lebih banyak komponen yang membuat panggilan REST mungkin masuk akal untuk menempatkan logika semacam ini di kelas yang dapat digunakan di seluruh komponen. MisalnyaRESTClient.post(…)

Paket lain yang populer baru-baru ini adalah: axios

Install : npm install axios --save

Permintaan berbasis Janji sederhana

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

Anda dapat menginstal superagent

npm install superagent --save

kemudian untuk melakukan panggilan pos ke server

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

Pada 2018 dan selanjutnya, Anda memiliki opsi yang lebih modern yaitu menggabungkan async / menunggu dalam aplikasi ReactJS Anda. Pustaka klien HTTP berbasis janji seperti aksioma dapat digunakan. Kode sampel diberikan di bawah ini:

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

Saya pikir cara ini juga cara yang normal. Tapi maaf, saya tidak bisa menjelaskan dalam bahasa Inggris ((

    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 / question', {metode: 'POST', tajuk: {Terima: 'application / json', 'Tipe-Konten': 'application / json',}, badan: JSON.stringify (this.state) }). kemudian (response => {console.log (response)}) .catch (error => {console.log (error)})

Berikut adalah daftar perbandingan pustaka ajax berdasarkan fitur dan dukungan. Saya lebih suka menggunakan fetch hanya untuk pengembangan sisi klien atau isomorfik untuk digunakan pada pengembangan sisi klien dan server.

Untuk informasi lebih lanjut tentang isomorfik-fetch vs fetch

Berikut adalah fungsi util yang dimodifikasi (posting lain di stack) untuk mendapatkan dan memposting keduanya. Buat file 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 };

Penggunaan seperti di bawah ini di komponen lain

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

Berikut ini sebuah contoh: 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');
  });

Ini menggunakan jquery.ajaxmetode tetapi Anda dapat dengan mudah menggantinya dengan lib berbasis AJAX seperti aksioma, superagent atau fetch.