Многие люди не понимают, как интегрировать свой внутренний код (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.

Удачного кодирования :)

Дивяншу Кумар