Bagaimana cara membuat panggilan pos istirahat dari kode ReactJS?


126

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.


6
Bisakah Anda memilih jawaban yang membantu Anda?
Socrates

Jawaban:


215

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


4
Anda harus menginstal dan mengimpornya . Jangan lupa, fetch()fungsinya tidak mengembalikan data , itu hanya mengembalikan janji .
Malvolio

1
haha @Divya, saya baru saja akan membuat komentar yang sama sebelum membaca milik Anda. Tidak yakin apakah akan memasukkannya ke dalam React.createClass. Juga, dapatkah kami memiliki tautan ke dokumen reaksi? Saya mencoba mencari situs mereka ( facebook.github.io/react/docs/hello-world.html ) tidak berhasil.
Tyler L

1
Bisakah kami memodifikasi jawaban asli untuk memasukkan impor?
Tyler L

5
IMO, @amann memiliki jawaban yang lebih baik di bawah ini . Jawaban ini menyiratkan fetchdibangun ke Bereaksi, yang bukan, dan tidak ada tautan ke dokumen yang dirujuk. fetchadalah (pada saat penulisan) API berbasis Janji eksperimental . Untuk kompatibilitas browser, Anda memerlukan babel polyfill .
chris

2
Perhatikan, bahwa ini dari React Native docs, bukan React JS docs, tetapi Anda dapat menggunakan Fetch_API di React JS juga. facebook.github.io/react-native/docs/network.html
Pål Brattberg

23

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(…)


5
Bagi saya, ini adalah jawaban terbaik, karena Bereaksi tidak memiliki sesuatu yang dibangun di. Anda juga harus impor fetchatau superagentatau jQueryatau axiosatau sesuatu yang lain yang bukan merupakan bagian dari "vanili Bereaksi" untuk melakukan apa pun selain apa yang diposting di atas .
vapcguy

Sepertinya jika Anda menggunakan labu, itu berfungsi dengan baik untuk dilakukan JSON.stringify({"key": "val"})dan kemudian di sisi labu lakukanrequest.get_json()
Pro Q

Yap, jika Anda memposting JSON, Anda harus melakukannya JSON.stringifyterlebih dahulu.
amann

19

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

9

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

5

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

untuk beberapa alasan, nodejs mengartikan await-SyntaxError: await is a reserved word (33:19)
prayagupd

@prayagupd versi node apa yang Anda gunakan?
Kevin Le - Khnle

5

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



0

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

-4

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.


Terima kasih banyak untuk contohnya :). Saya juga ingin memahami apakah layanan saya mengharapkan data format JSON. Lalu perubahan apa yang akan diperlukan? Segala jenis informasi akan sangat membantu. Jadi ketika saya menggunakan perintah curl untuk mencapai titik akhir seperti curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' jadi bagaimana saya bisa memanggil layanan seperti itu.
Divya

buat variabel yang disebut data dengan '{"Id":"112","User":"xyz"}'dan ubah URL ke localhost: 8080 / myapi / ui / start, itu saja, begitu panggilan XHR berhasil Anda akan mendarat di dalam metode yang dilakukan dan Anda akan memiliki akses ke data Anda melalui hasilnya Properti.
Sanyam Agrawal
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.