Выполнение запроса POST с помощью React Native
Я работаю над мобильным приложением с React Native. Я новичок в этом, и я не могу понять, как сделать правильный HTTP-запрос POST для отправки данных в API. Мне дали такой пример:
POST / devapi / records /? Access_token = [...] HTTP / 1.1
Хост: website.org
Тип содержимого: приложение / x-www-form-urlencoded
unit = 12331 & title = test & date = 07.10.2018 & requireId = 3 & isInternal = 1 & serviceType = campus
Успех выглядит так:
{
"recordId": 63, «единиц»: 2, "name": "Боб", "успех": правда
}
Ошибки выглядят так:
{
"message": "Вы должны ввести дату для этой записи.", «ошибка»: -2
}
Мое текущее решение следующее:
postRecord() {
const input = {
units: this.state.units,
title: this.state.title,
date: this.convertToUnix(this.state.date),
requirementId: this.props.navigation.state.params.requirementId,
isInternal: this.state.differentiateExternal,
serviceType: this.state.type
};
const params = this.props.screenProps.navigation.state.params;
const accessToken = params ? params.currstate.accessToken : null;
const searchParams = Object.keys(input).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(input[key])}`).join('&');
console.info('searchParams', searchParams);
return fetch('https://webiste.org/devapi/records/?access_token=' + accessToken=[...] HTTP/1.1, {
method: 'POST',
header: {
'Content-length': '86',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: input.units + input.title + input.date + input.requirementId + input.isInternal + input.serviceType
})
.then((response) => response.json())
.then((responseJson) => {
console.info('the response is:', responseJson);
if (responseJson.success === 'true') {
Alert.alert(
'Record created successfully',
[
{
text: 'Ok',
style: 'cancel',
onPress: () => this.props.navigation.navigate('RequirementRecordScreen')
}
]
);
} else if (responseJson.error === -2) {
Alert.alert(
'There was an error creating the record',
responseJson.message,
[
{
text: 'Ok',
style: 'cancel',
onPress: () => console.info('Cancel xDDDD')
}
],
);
}
});
}
При тестовом запуске мой console.info() возвращает:
searchParams units = 3 & title = test% 20test% 20test & date = 1534402800 & requireId = 3 & isInternal = 0 & serviceType = nation
Затем всегда возвращается ошибка ответа JSON, в которой говорится, что мне нужно ввести количество «единиц». Как я могу изменить это, чтобы оно работало правильно?
Ответы 3
Вы не используете правильные переменные в своем запросе
return fetch('https://website.org/devapi/records/?access_token=' + accessToken, {
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: searchInput
})
fetch('https://webiste.org/devapi/records/?access_token=' + accessToken=[...] HTTP/1.1',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body: input.units + input.title + input.date + input.requirementId + input.isInternal + input.serviceType
}).then((response)=>response.json()).
then((responseJson)=>{
if (resppnseJson==='Data Matched')
{
alert(responseJson);
}else{
alert(responseJson);
}
})
.catch((error)=>{console.error(error)});
вы можете сделать запрос POST таким образом
Документация выставки (независимо от того, используете ли вы его для своего проекта RN) рекомендует использовать Fetch, однако Fetch с method: 'POST', поскольку поле иногда не работает по определенным причинам заголовка, и у меня лично были ошибки с ним в прошлом, когда Я не использую credentials: 'include' в качестве аргумента.
axios.post(url, { userData: JSON.stringify(userData), oauth_provider:"google" })
.then(response => {
console.info("POST RESPONSE: " , JSON.stringify(response));
// alert(JSON.stringify(response))
})
.catch(error => {
console.info("ERROR RESPONSE: " , JSON.stringify(error));
});
Рекомендую использовать библиотеку axios. Все, что вам нужно сделать, это:
npm install axiosв папке вашего проектаimport axios from "axios"в заголовке вашего компонента / файла- Используйте в своем проекте - ниже я помещаю фрагмент, который использую.
Дополнительные соображения при публикации в домене заключаются в том, что он разрешает доступ с этого URL-адреса, если вы публикуете сообщение в API, используйте эти заголовки в верхней части вашего файла PHP.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");
* можно заменить своим URL-адресом. Если вы все же используете этот метод в своем файле PHP, обязательно защитите свой файл с помощью ключа аутентификации, который вы установили самостоятельно.
Вам следует связаться с бэкэнд-командой. Возможно, вы используете неправильный параметр даты