Взаимодействие с API — это основа любого современного приложения. Хотите загрузить список товаров? Подтянуть данные о погоде? Или, может быть, авторизовать пользователя? Всё это делается с помощью API (Application Programming Interface). Сегодня мы разберём, как работать с API в React Native, научимся использовать fetch и библиотеку Axios, а в конце создадим приложение для поиска погоды.

Что такое API и зачем оно нужно?

API — это «мост» между вашим приложением и внешними сервисами. Например:

• Когда вы вводите город в погодное приложение, оно отправляет запрос к API (например, OpenWeather).
• API возвращает данные, такие как температура, влажность и прогноз.
• Ваше приложение отображает эти данные пользователю.

Два инструмента для работы с API в React Native

• Fetch: Это встроенный метод JavaScript для работы с запросами. Он прост и удобен, но требует чуть больше кода для обработки ошибок и настройки запросов.
• Axios: Это популярная библиотека для работы с HTTP-запросами. Она предоставляет удобный синтаксис, мощную обработку ошибок и дополнительные функции, такие как настройки по умолчанию.

Fetch: основные моменты

Пример GET-запроса

fetch('https://api.example.com/data')
  .then((response) => response.json()) // Преобразуем ответ в JSON
  .then((data) => console.log(data))  // Обрабатываем данные
  .catch((error) => console.error('Ошибка:', error)); // Обрабатываем ошибки

Пример POST-запроса

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }), // Отправляем данные
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Ошибка:', error));

Axios: основные моменты

Установка Axios

npm install axios

Пример GET-запроса

import axios from 'axios';

axios
  .get('https://api.example.com/data')
  .then((response) => console.log(response.data)) // Данные находятся в response.data
  .catch((error) => console.error('Ошибка:', error)); // Обрабатываем ошибки

Пример POST-запроса

axios
  .post('https://api.example.com/data', { key: 'value' })
  .then((response) => console.log(response.data))
  .catch((error) => console.error('Ошибка:', error));

Fetch vs Axios

Практика: приложение для поиска погоды

Создадим приложение, которое позволяет пользователю ввести название города, отправить запрос к открытому API (OpenWeather) и получить текущую температуру.

Шаг 1: Регистрация на OpenWeather

1. Перейдите на OpenWeather и зарегистрируйтесь.
2. Получите API-ключ на своей панели управления.

Шаг 2: Структура приложения

1. Создайте проект React Native (через Expo или CLI).
2. Установите Axios:

npm install axios

Шаг 3: Код приложения

Вот полный код приложения:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';

const App = () => {
  const [city, setCity] = useState(''); // Храним название города
  const [weather, setWeather] = useState(null); // Храним данные о погоде
  const [loading, setLoading] = useState(false); // Показываем индикатор загрузки
  const [error, setError] = useState(null); // Храним ошибки

  const API_KEY = 'YOUR_API_KEY'; // Замените на ваш API-ключ
  const fetchWeather = async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
      );
      setWeather(response.data);
    } catch (err) {
      setError('Город не найден. Проверьте название.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Поиск погоды</Text>

      <TextInput
        style={styles.input}
        placeholder="Введите город"
        value={city}
        onChangeText={setCity}
      />

      <Button title="Найти" onPress={fetchWeather} />

      {loading && <ActivityIndicator size="large" color="#0000ff" />}

      {error && <Text style={styles.error}>{error}</Text>}

      {weather && (
        <View style={styles.weatherContainer}>
          <Text style={styles.cityName}>{weather.name}</Text>
          <Text style={styles.temperature}>{Math.round(weather.main.temp)}°C</Text>
          <Text>Ощущается как: {Math.round(weather.main.feels_like)}°C</Text>
          <Text>Погода: {weather.weather[0].description}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    width: '100%',
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
  weatherContainer: {
    marginTop: 20,
    alignItems: 'center',
  },
  cityName: {
    fontSize: 22,
    fontWeight: 'bold',
  },
  temperature: {
    fontSize: 48,
    fontWeight: 'bold',
    color: '#ff4500',
  },
  error: {
    color: 'red',
    marginTop: 10,
  },
});

export default App;

Что мы сделали?

Состояния

• city: для хранения названия города.
• weather: для хранения данных о погоде.
• loading: для отображения индикатора загрузки.
• error: для обработки ошибок.

Запрос с Axios

Мы отправляем GET-запрос на OpenWeather API, используя город из состояния city.

Динамическое отображение

• Если данные о погоде загружены, отображаем их.
• Если идёт загрузка, показываем индикатор.
• Если произошла ошибка, выводим сообщение об ошибке.