Многие люди не понимают, как интегрировать свой внутренний код (Node-express, Python-flask и т. Д.).
Чтобы решить эту проблему, лучше всего создать URL-адрес на сервере, который принимает данные с сервера как json, обрабатывает их и отвечает данными json, используя почтовый запрос.
В: Почему только POST, почему не GET
Два общих метода - это GET и POST:
- GET - запрашивает данные из указанного ресурса.
- POST - отправляет данные для обработки на указанный ресурс.
Но есть некоторые ограничения для запросов GET, а именно:
- Запросы GET можно кэшировать
- GET-запросы остаются в истории браузера
- GET-запросы можно добавлять в закладки
- Запросы GET никогда не следует использовать при работе с конфиденциальными данными.
- Запросы GET имеют ограничения по длине
- Запросы GET следует использовать только для получения данных.
Дополнительные баллы по запросам POST:
- Запросы POST никогда не кешируются
- Запросы POST не остаются в истории браузера
- Запросы POST не могут быть добавлены в закладки
- POST-запросы не имеют ограничений по длине данных
(Источник: https://www.w3schools.com/tags/ref_httpmethods.asp)
В запросе GET параметры отправляются как url, что иногда вам не нужно. Как будто у вас могут быть конфиденциальные данные, например, имя пользователя и пароль, которые необходимо скрыть при отправке запроса, поэтому запрос POST является лучшей альтернативой.
Также, если вы хотите отправлять данные, отличные от символов ASCII, запросы GET не так удобны, однако в таких случаях лучше использовать POST.
Но мы также можем использовать GET, здесь для примера я использовал POST.
В: Но как сделать POST-запрос.
Для этого fetch API (https://facebook.github.io/react-native/docs/network.html), предоставляемый react-native, приходит на помощь.
Он очень прост в использовании и может использоваться для выполнения всех видов запросов, GET, POST и т. Д. Базовая структура запроса на выборку выглядит следующим образом:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
}).then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
В: Я не понимаю, что это за код
В приведенном выше коде есть базовый процесс выборки, за которым следует синтаксический анализ ответа JSON и последующие действия с ответом.
Метод выборки имеет параметр «method» для указания типа запроса, здесь его «POST», как описано выше, почему.
Заголовки содержат заголовки запроса, который вы делаете, он может содержать токен авторизации и т. Д., Здесь он имеет тип содержимого и тип принятия.
Тело содержит основную часть запроса, в которой мы будем отправлять данные нашего запроса в качестве параметра.
.then () используется как функция, которая будет выполняться после завершения запроса на выборку.
сначала затем анализирует данные json из ответа сервера.
Затем второй играет с проанализированными данными json и выполняет некоторую функцию.
Затем есть блок catch, который улавливает любую ошибку.
В: Хватит теории, можете привести пример
Конечно, почему бы и нет, допустим, мы хотим создать базовое приложение, которое извлекает некоторые данные с помощью API данных Hasura.
Для этого make мы будем использовать конечную точку / v1 / query /, предоставленную Hasura, в которой уже указаны статьи и авторы двух таблиц, поэтому давайте выберем из нее имя автора.
Вы можете использовать api-console hasura для генерации тела запроса или написать его самостоятельно.
Ответ на вышеуказанный запрос:
Допустим, мы хотим создать приложение, в котором при нажатии имя автора должно отображаться в окне предупреждения.
Код выглядит следующим образом
Также не забудьте изменить имя кластера с «advance88» на имя вашего кластера в следующем коде.
import React, { Component } from 'react'; import { TouchableOpacity, View, ActivityIndicator, Text, Alert} from 'react-native'; export default class App extends Component { handlePress = async () => { fetch('https://data.advance88.hasura-app.io/v1/query', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ "type": "select", "args": { "table": "author", "columns": [ "name" ], "limit": "1" } }) }) .then((response) => response.json()) .then((responseJson) => { Alert.alert("Author name at 0th index: " + responseJson[0].name); }) .catch((error) => { console.error(error); }); } render(){ return( <View style={{paddingTop: 50, paddingLeft: 50 }}> <Text> Some other text </Text> <Text> Some other text </Text> <TouchableOpacity onPress={this.handlePress.bind(this)}> <Text style={{paddingTop: 50, paddingLeft: 50, color: '#FF0000'}}> Click me to see the name </Text> </TouchableOpacity> </View> ); } }
Вот стартовый экран:
При щелчке по тексту:
Поздравляем, вы создали свой первый API-интерфейс загрузки в react-native.
Точно так же на вашем сервере могут быть настроены различные конечные точки для работы с данными json.
Удачного кодирования :)
Дивяншу Кумар