Contents

删除网络数据

Contents

1. 添加 http 包
2. 删除服务器上的数据
3. 更新屏幕
- 从 deleteAlbum() 方法返回响应
完整示例

本食谱介绍如何使用 http 包删除网络数据。

本食谱包含以下步骤：

添加 http 包。
删除服务器上的数据。
更新屏幕。

要将 http 包添加为依赖项，请运行 flutter pub add：

flutter pub add http

导入 http 包。

dart

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

如果您要部署到 Android，请编辑您的 AndroidManifest.xml 文件以添加 Internet 权限。

xml<!-- 获取互联网数据所需。 -->
<uses-permission android:name="android.permission.INTERNET" />

同样，如果您要部署到 macOS，请编辑您的 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 文件以包含网络客户端授权。

xml<!-- 获取互联网数据所需。 -->
<key>com.apple.security.network.client</key>
<true/>

本食谱介绍如何使用 http.delete() 方法从 JSONPlaceholder 删除相册。请注意，这需要您想要删除的相册的 id。在本例中，使用您已知的某个 ID，例如 id = 1。

dartFuture<http.Response> deleteAlbum(String id) async {
  final http.Response response = await http.delete(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
  );

  return response;
}

http.delete() 方法返回一个包含 Response 的 Future。

Future 是用于处理异步操作的核心 Dart 类。Future 对象表示将来某个时间可用的潜在值或错误。
http.Response 类包含从成功的 http 调用接收到的数据。
deleteAlbum() 方法接受一个 id 参数，该参数需要用于识别要从服务器删除的数据。

为了检查数据是否已删除，首先使用 http.get() 方法从 JSONPlaceholder 获取数据，并将其显示在屏幕上。（有关完整示例，请参阅获取数据食谱。）您现在应该有一个 删除数据 按钮，按下该按钮会调用 deleteAlbum() 方法。

dartColumn(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text(snapshot.data?.title ?? 'Deleted'),
    ElevatedButton(
      child: const Text('Delete Data'),
      onPressed: () {
        setState(() {
          _futureAlbum =
              deleteAlbum(snapshot.data!.id.toString());
        });
      },
    ),
  ],
);

现在，当您单击 删除数据 按钮时，将调用 deleteAlbum() 方法，您传递的 id 是您从互联网检索到的数据的 id。这意味着您将删除从互联网获取的相同数据。

发出删除请求后，您可以从 deleteAlbum() 方法返回响应，以通知我们的屏幕数据已被删除。

dartFuture<Album> deleteAlbum(String id) async {
  final http.Response response = await http.delete(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
  );

  if (response.statusCode == 200) {
    // 如果服务器返回 200 OK 响应，则返回一个空的 Album。删除后，您将得到一个空的 JSON `{}` 响应。
    // 不要返回 `null`，否则 `snapshot.hasData` 在 `FutureBuilder` 中将始终返回 false。
    return Album.empty();
  } else {
    // 如果服务器未返回“200 OK”响应，则抛出异常。
    throw Exception('Failed to delete album.');
  }
}

FutureBuilder() 现在在接收到响应时重新构建。如果请求成功，响应的主体中将没有任何数据，因此 Album.fromJson() 方法使用默认值（在我们的例子中为 null）创建 Album 对象的实例。您可以根据需要更改此行为。

就是这样！现在您有了从互联网删除数据的函数。

dartimport 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Album> fetchAlbum() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
  );

  if (response.statusCode == 200) {
    // 如果服务器返回 200 OK 响应，则解析 JSON。
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // 如果服务器未返回 200 OK 响应，则抛出异常。
    throw Exception('Failed to load album');
  }
}

Future<Album> deleteAlbum(String id) async {
  final http.Response response = await http.delete(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
  );

  if (response.statusCode == 200) {
    // 如果服务器返回 200 OK 响应，则返回一个空的 Album。删除后，您将得到一个空的 JSON `{}` 响应。
    // 不要返回 `null`，否则 `snapshot.hasData` 在 `FutureBuilder` 中将始终返回 false。
    return Album.empty();
  } else {
    // 如果服务器未返回“200 OK”响应，则抛出异常。
    throw Exception('Failed to delete album.');
  }
}

class Album {
  int? id;
  String? title;

  Album({this.id, this.title});

  Album.empty();

  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {
        'id': int id,
        'title': String title,
      } =>
        Album(
          id: id,
          title: title,
        ),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  late Future<Album> _futureAlbum;

  @override
  void initState() {
    super.initState();
    _futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Delete Data Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Delete Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Album>(
            future: _futureAlbum,
            builder: (context, snapshot) {
              // 如果连接已完成，则检查响应数据或错误。
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(snapshot.data?.title ?? 'Deleted'),
                      ElevatedButton(
                        child: const Text('Delete Data'),
                        onPressed: () {
                          setState(() {
                            _futureAlbum =
                                deleteAlbum(snapshot.data!.id.toString());
                          });
                        },
                      ),
                    ],
                  );
                } else if (snapshot.hasError) {
                  return Text('${snapshot.error}');
                }
              }

              // 默认情况下，显示加载微调器。
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。查看源代码或报告问题。

1. 添加 http 包

2. 删除服务器上的数据

3. 更新屏幕

从 deleteAlbum() 方法返回响应

完整示例

1. 添加 `http` 包