Интеграция приложений React с внутренним кодом с помощью API-интерфейса fetch.

21 июня 2018 г.

Многие люди склонны путаться в том, как интегрировать свой внутренний код (Node-express, Python-flask и т. д.).

Чтобы решить эту проблему, лучше всего создать URL-адрес на сервере, который принимает данные в виде json с сервера, обрабатывает их и отвечает данными json, используя почтовый запрос.

Двумя распространенными методами являются 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.

Базовая структура общения.

Для этого API выборки (https://facebook.github.io/react-native/docs/network.html), предоставленный react-native, приходит на помощь.

Он очень прост в использовании и может использоваться для выполнения всех видов запросов, GET, POST и т. д. Базовая структура запроса на выборку выглядит следующим образом:

fetch(' { 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); });

Код выглядит следующим образом

Также не забудьте изменить имя кластера с «advance88» на имя вашего кластера в следующем коде.

import React, { Component } from 'react'; import { TouchableOpacity, View, ActivityIndicator, Text, Alert} from 'react-native'; export default class App extends Component { handlePress = async () => { fetch('[ { 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>