Обработка запросов PUT и DELETE в Flutter — динамическое обновление и удаление данных

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Когда работаете с API в Flutter, важно не только получать и отправлять данные, но и обновлять и удалять их динамически. Многие приложения требуют изменения существующих записей (запросы PUT/PATCH) и удаления записей (запросы DELETE).

Когда работаете с API в Flutter, важно не только получать и отправлять данные, но и обновлять и удалять их динамически. Многие приложения требуют изменения существующих записей (запросы PUT/PATCH) и удаления записей (запросы DELETE).

В этом руководстве мы рассмотрим, как реализовать запросы PUT & DELETE с помощью пакетов Dio и http в Flutter.

1. Понимание запросов PUT, PATCH и DELETE

🔹 Запрос PUT: Заменяет весь ресурс новыми данными.
🔹 Запрос PATCH: Обновляет конкретные поля в существующем ресурсе.
🔹 Запрос DELETE: Удаляет ресурс с сервера.

Пример API-эндпоинта (тестовый API JSONPlaceholder):

• PUT: https://jsonplaceholder.typicode.com/posts/1 (Заменяет пост)
• PATCH: https://jsonplaceholder.typicode.com/posts/1 (Обновляет поля)
• DELETE: https://jsonplaceholder.typicode.com/posts/1 (Удаляет пост)

2. Настройка проекта Flutter

Сначала создайте новый проект Flutter:

flutter create put_delete_example
cd put_delete_example

Добавьте зависимости:

flutter pub add http dio

Импортируйте необходимые пакеты:

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:dio/dio.dart';

3. Отправка запроса PUT для обновления данных

Использование пакета http

Future<void> updatePost(int id, String title, String body) async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/$id');
  final response = await http.put(
    url,
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({'title': title, 'body': body, 'userId': 1}),
  );
  if (response.statusCode == 200) {
    print("Post updated successfully: ${response.body}");
  } else {
    print("Failed to update post");
  }
}

Использование пакета Dio

Future<void> updatePostDio(int id, String title, String body) async {
  final dio = Dio();
  try {
    final response = await dio.put(
      'https://jsonplaceholder.typicode.com/posts/$id',
      data: {'title': title, 'body': body, 'userId': 1},
    );
    print("Post updated: ${response.data}");
  } catch (e) {
    print("Error updating post: $e");
  }
}

✅ Что происходит здесь?

• Запрос Put отправляет новые данные для замены существующей записи.
• Мы отправляем данные в формате JSON с заголовками, указывающими application/json.
• Если запрос выполнен успешно, мы выводим обновлённые данные.

4. Выполнение PATCH-запроса для изменения определённых полей

Future<void> updatePostField(int id, String title) async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/$id');
  final response = await http.patch(
    url,
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({'title': title}),
  );
  if (response.statusCode == 200) {
    print("Post title updated: ${response.body}");
  } else {
    print("Failed to update post");
  }
}

✅ PATCH полезен, когда вам нужно обновить только одно или два поля, а не заменять весь ресурс.

5. Выполнение запроса DELETE для удаления данных

Использование пакета http

Future<void> deletePost(int id) async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/$id');
  final response = await http.delete(url);
  if (response.statusCode == 200) {
    print("Post deleted successfully");
  } else {
    print("Failed to delete post");
  }
}

Использование пакета Dio

Future<void> deletePostDio(int id) async {
  final dio = Dio();
  try {
    final response = await dio.delete('https://jsonplaceholder.typicode.com/posts/$id');
    print("Post deleted: ${response.statusCode}");
  } catch (e) {
    print("Error deleting post: $e");
  }
}

✅ Что здесь происходит?

• ЗапросDELETE удаляет ресурс с сервера.
• В случае успеха мы получаем код состояния, указывающий на удаление.

6. Создание простого пользовательского интерфейса для тестирования запросов API

Теперь давайте создадим простой пользовательский интерфейс приложения Flutter для тестирования динамического обновления и удаления записей.

main.dart – Базовый пользовательский интерфейс для запросов API

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: APIExampleScreen(),
    );
  }
}

class APIExampleScreen extends StatefulWidget {
  @override
  _APIExampleScreenState createState() => _APIExampleScreenState();
}

class _APIExampleScreenState extends State<APIExampleScreen> {
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _bodyController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PUT & DELETE API Calls')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: _titleController, decoration: InputDecoration(labelText: 'Title')),
            TextField(controller: _bodyController, decoration: InputDecoration(labelText: 'Body')),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                updatePost(1, _titleController.text, _bodyController.text);
              },
              child: Text('Update Post (PUT)'),
            ),
            ElevatedButton(
              onPressed: () {
                deletePost(1);
              },
              child: Text('Delete Post'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ Что здесь происходит?

• В пользовательском интерфейсе есть текстовые поля для ввода и кнопки для запуска запросов PUT и DELETE .
• Когда пользователь нажимает «Обновить публикацию», отправляется запрос PUT .
• Когда пользователь нажимает «Удалить публикацию», отправляется запрос DELETE.

7. Рекомендации по использованию PUT и DELETE во Flutter

✅ Используйте HTTP-перехватчики — при использовании Dio реализуйте перехватчики для глобальной обработки запросов.

✅ Обработка ошибок — всегда проверяйте коды состояния и корректно обрабатывайте ошибки.

✅ Обновляйте пользовательский интерфейс после вызовов API — используйте setState() или управление состоянием (Provider, Riverpod, Bloc) для отображения изменений.

✅ Используйте PATCH, когда это возможно — если обновляется только часть данных, предпочитайте PATCH PUT для экономии пропускной способности.

Заключение

Запросы PUT и DELETE необходимы для динамического взаимодействия с приложениями, позволяя пользователям легко изменять и удалять данные. Независимо от того, используется ли http или Dio, Flutter делает взаимодействие через API простым и эффективным.