จะโทรออกโพสต์ที่เหลือจากรหัส ReactJS ได้อย่างไร?

ฉันยังใหม่กับ ReactJS และ UI และฉันต้องการทราบวิธีสร้างการโทร POST แบบ REST แบบง่ายๆจากโค้ด ReactJS

หากมีตัวอย่างมานำเสนอคงจะเป็นประโยชน์จริงๆ

ตรงจากเอกสารตอบสนอง :

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

(นี่คือการโพสต์ JSON แต่คุณสามารถทำได้เช่นฟอร์มหลายส่วน)

React ไม่มีความเห็นเกี่ยวกับวิธีการโทรของคุณ REST โดยทั่วไปคุณสามารถเลือกไลบรารี AJAX ประเภทใดก็ได้ที่คุณต้องการสำหรับงานนี้

วิธีที่ง่ายที่สุดในการใช้ JavaScript แบบเก่าอาจเป็นดังนี้:

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

fetchในเบราว์เซอร์ที่ทันสมัยคุณยังสามารถใช้

หากคุณมีส่วนประกอบเพิ่มเติมที่ทำให้ REST เรียกมันอาจเหมาะสมที่จะใส่ตรรกะประเภทนี้ในคลาสที่สามารถใช้กับคอมโพเนนต์ได้ เช่นRESTClient.post(…)

อีกแพ็กเกจยอดนิยมล่าสุดคือ: axios

ติดตั้ง: npm install axios --save

คำขอตามสัญญาอย่างง่าย

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

คุณสามารถติดตั้ง superagent

npm install superagent --save

จากนั้นเพื่อทำการโพสต์โทรไปยังเซิร์ฟเวอร์

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 เป็นต้นไปคุณมีตัวเลือกที่ทันสมัยกว่าซึ่งรวม async / await ไว้ในแอปพลิเคชัน ReactJS ของคุณ สามารถใช้ไลบรารีไคลเอ็นต์ HTTP ตามสัญญาเช่น axios โค้ดตัวอย่างได้รับด้านล่าง:

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

ฉันคิดว่าวิธีนี้เป็นวิธีปกติ แต่ขออภัยฉันไม่สามารถบรรยายเป็นภาษาอังกฤษได้ ((

    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

ดึงข้อมูล ('url / questions', {method: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }) แล้ว (response => {console.log (response)}) .catch (error => {console.log (error)})

นี่คือรายการการเปรียบเทียบไลบรารีของ ajax ตามคุณสมบัติและการสนับสนุน ฉันชอบใช้การดึงข้อมูลสำหรับการพัฒนาฝั่งไคลเอ็นต์เท่านั้นหรือการดึงข้อมูลแบบ isomorphicเพื่อใช้ในการพัฒนาทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับisomorphic-fetch vs fetch

นี่คือฟังก์ชัน util ที่แก้ไข (โพสต์อื่นบนสแต็ก) สำหรับรับและโพสต์ทั้งสองอย่าง สร้างไฟล์ 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 };

การใช้งานเหมือนด้านล่างในส่วนประกอบอื่น

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

นี่คือตัวอย่าง: 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.ajaxวิธีการ แต่คุณสามารถแทนที่ได้อย่างง่ายดายด้วย libs ที่ใช้ AJAX เช่น axios, superagent หรือ fetch