Как сделать пост после вызова из кода ReactJS?

Ответ 1

Прямо из документа React:

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

(Это публикация JSON, но вы также можете сделать, например, multipart-form.)

Ответ 2

Реакция действительно не имеет никакого мнения о том, как вы совершаете вызовы 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(…)

Ответ 3

Еще один недавно популярный пакет: axios

Установить: npm install axios --save

Простые запросы на основе Promise

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

Ответ 4

вы можете установить суперагент

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

Ответ 5

По состоянию на 2018 год и более, у вас есть более современный вариант, который должен включать async/wait в вашем приложении 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) {
           ...
        }
    }
    ...
}

Ответ 6

Я думаю, что этот путь также нормальный путь. Но извините, я не могу описать по-английски ((

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

Ответ 7

Ниже приведен список сопоставлений библиотек ajax на основе функций и поддержки. Я предпочитаю использовать выборку только для разработки на стороне клиента или изоморфной выборки для использования как на стороне клиента, так и на стороне сервера.

Для получения дополнительной информации об изоморфной выборке vs fetch

Ответ 8

Вот пример: 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 но вы можете легко заменить его на основанные на AJAX libs, такие как axios, superagent или fetch.