Làm thế nào để thực hiện một cuộc gọi bài còn lại từ mã ReactJS?

Tôi chưa quen với ReactJS và UI và tôi muốn biết cách thực hiện một cuộc gọi POST dựa trên REST đơn giản từ mã ReactJS.

Nếu có bất kỳ ví dụ nào, nó sẽ thực sự hữu ích.

Trực tiếp từ các tài liệu React :

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

(Đây là đăng bài JSON, nhưng bạn cũng có thể làm, ví dụ, dạng nhiều phần.)

React không thực sự có ý kiến ​​về cách bạn thực hiện các cuộc gọi REST. Về cơ bản, bạn có thể chọn bất kỳ loại thư viện AJAX nào bạn thích cho nhiệm vụ này.

Cách dễ nhất với JavaScript cũ đơn giản có lẽ là như thế này:

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

Trong các trình duyệt hiện đại, bạn cũng có thể sử dụng fetch.

Nếu bạn có nhiều thành phần tạo ra các lệnh gọi REST, có thể có ý nghĩa khi đưa loại logic này vào một lớp có thể được sử dụng trên các thành phần. Ví dụRESTClient.post(…)

Một gói khác phổ biến gần đây là: axios

Tải về : npm install axios --save

Yêu cầu dựa trên Promise đơn giản

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

bạn có thể cài đặt superagent

npm install superagent --save

sau đó thực hiện cuộc gọi bài đến máy chủ

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

Kể từ năm 2018 trở đi, bạn có một tùy chọn hiện đại hơn đó là kết hợp async / await trong ứng dụng ReactJS của bạn. Có thể sử dụng thư viện máy khách HTTP dựa trên lời hứa như axios. Mã mẫu được đưa ra dưới đây:

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

Tôi nghĩ cách này cũng là một cách bình thường. Nhưng xin lỗi, tôi không thể mô tả bằng tiếng Anh ((

    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

tìm nạp ('url / câu hỏi', {phương thức: 'POST', tiêu đề: {Chấp nhận: 'application / json', 'Loại nội dung': 'application / json',}, body: JSON.opesify (this.state) }). sau đó (hồi đáp => {console.log (phản hồi)}) .catch (error => {console.log (error)})

Dưới đây là danh sách so sánh các thư viện ajax dựa trên các tính năng và hỗ trợ. Tôi thích sử dụng tìm nạp chỉ cho phát triển phía máy khách hoặc tìm nạp đẳng cấu để sử dụng trong cả phát triển phía máy khách và phía máy chủ.

Để biết thêm thông tin về isomorphic-fetch vs fetch

Đây là một chức năng được sửa đổi (một bài đăng khác trên stack) để lấy và đăng cả hai. Tạo tập tin 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 };

Cách sử dụng như dưới đây trong một thành phần khác

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

Dưới đây là một ví dụ: 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');
  });

Nó đã sử dụng jquery.ajaxphương thức nhưng bạn có thể dễ dàng thay thế nó bằng các lib dựa trên AJAX như axios, superagent hoặc fetch.