Я новичок в ReactJS и пользовательском интерфейсе и хотел узнать, как сделать простой вызов POST на основе REST из кода ReactJS.
Если есть какой-либо пример, это было бы очень полезно.
Я новичок в ReactJS и пользовательском интерфейсе и хотел узнать, как сделать простой вызов POST на основе REST из кода ReactJS.
Если есть какой-либо пример, это было бы очень полезно.
Прямо из документа 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.)
Реакция действительно не имеет никакого мнения о том, как вы совершаете вызовы 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
Простые запросы на основе Promise
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
вы можете установить суперагент
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/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) {
...
}
}
...
}
Я думаю, что этот путь также нормальный путь. Но извините, я не могу описать по-английски ((
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)
})
}
Ниже приведен список сопоставлений библиотек ajax на основе функций и поддержки. Я предпочитаю использовать выборку только для разработки на стороне клиента или изоморфной выборки для использования как на стороне клиента, так и на стороне сервера.
Для получения дополнительной информации об изоморфной выборке vs fetch
Вот пример: 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.