Відповіді:
Прямо з документів React :
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
(Це розміщення JSON, але ви також можете зробити, наприклад, багаточастинні форми.)
fetch()
функція не повертає дані , вона просто повертає обіцянку .
fetch
це вбудовано в React, чого немає, і немає посилання на документи, на які посилається. fetch
є (на момент написання) експериментальним API на основі обіцянок . Для сумісності з браузером вам знадобиться вакхана поліфіл .
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(…)
fetch
або superagent
або jQuery
або axios
або що - то інше , що не є частиною «ваніль React» для того , щоб зробити що - небудь інше , ніж те , що розміщений вище .
JSON.stringify({"key": "val"})
потім на стороні колби зробітьrequest.get_json()
JSON.stringify
це зробити.
Ще один популярний останнім часом пакунок: axios
Встановити: npm install axios --save
Прості запити на основі обіцянки
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 року і пізніше, у вас є більш сучасний варіант, який полягає в тому, щоб включити асинхронізацію / очікування у свій додаток 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) {
...
}
}
...
}
await
-SyntaxError: await is a reserved word (33:19)
Я думаю, що цей спосіб також є нормальним. Але вибачте, я не можу описати англійською мовою ((
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 / questions', {метод: 'POST', заголовки: {Прийняти: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). тоді (відповідь => {console.log (відповідь)}) .catch (помилка => {console.log (помилка)})
Ось список порівняння бібліотек ajax на основі функцій та підтримки. Я вважаю за краще використовувати добірку лише для розвитку клієнта або ізоморфного вибору в розробці як на стороні клієнта, так і на сервері.
Для отримання додаткової інформації про izomorphic-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
метод, але ви можете легко замінити його на базі AJAX, такі як axios, superagent або fetch.
'{"Id":"112","User":"xyz"}'
та змініть URL на localhost: 8080 / myapi / ui / start, ось про це, як тільки виклик XHR буде успішним, ви приземлитеся в виконаному методі, і ви отримаєте доступ до ваших даних через результат майно.