使用 http 插件进行 Flutter 网络请求的实战指南

一、Flutter 网络请求概述

在现代移动应用开发中，网络请求是至关重要的一部分。Flutter作为一款流行的跨平台开发框架，为开发者提供了丰富的工具和插件来处理网络请求。其中，http插件是官方推荐用于处理HTTP请求的工具，它简单易用且功能强大，能够满足大部分应用场景下的网络请求需求。

Flutter应用通过网络请求可以从服务器获取数据，如JSON格式的用户信息、商品列表等，也可以向服务器发送数据，比如用户注册信息、订单提交等。理解和掌握如何在Flutter中进行高效的网络请求，对于开发功能完整、体验良好的应用至关重要。

二、`http`插件介绍

2.1 插件特点

http插件是Flutter社区广泛使用的HTTP客户端，它基于Dart的io库构建。其主要特点包括：

简单易用：提供简洁直观的API，开发者可以轻松发起各种类型的HTTP请求，如GET、POST、PUT、DELETE等。
功能丰富：支持设置请求头、请求体，处理响应数据，包括JSON、XML等常见格式。
性能优化：在底层进行了性能优化，能够高效地处理网络请求和响应，提升应用的响应速度。

2.2 安装与导入

要在Flutter项目中使用http插件，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  http: ^0.13.5

然后在终端中运行flutter pub get命令来安装该插件。安装完成后，在需要使用的Dart文件中导入http库：

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

这里使用了as http别名，是为了避免与其他可能导入的库产生命名冲突。

三、GET 请求

3.1 基本GET请求

GET请求通常用于从服务器获取数据。下面是一个简单的示例，用于获取一个JSON格式的用户列表：

Future<List<dynamic>> fetchUsers() async {
  final response = await http.get(Uri.parse('https://example.com/api/users'));
  if (response.statusCode == 200) {
    return List<dynamic>.from(json.decode(response.body));
  } else {
    throw Exception('Failed to load users');
  }
}

在上述代码中：

使用http.get方法发起GET请求，Uri.parse用于将URL字符串解析为Uri对象。
await关键字用于等待网络请求完成，因为网络请求是异步操作。
检查响应状态码response.statusCode，如果是200，表示请求成功，使用json.decode将响应体（response.body）解析为Dart对象，再转换为List<dynamic>类型。
如果状态码不是200，抛出异常。

3.2 GET 请求带参数

有时候我们需要在GET请求中传递参数，例如根据用户ID获取特定用户信息。可以通过构建包含参数的URL来实现：

Future<dynamic> fetchUserById(int id) async {
  final Uri uri = Uri.parse('https://example.com/api/user')
    .replace(queryParameters: {'id': id.toString()});
  final response = await http.get(uri);
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load user');
  }
}

在这个例子中，使用Uri.replace方法构建带有id参数的URL，queryParameters是一个Map，将参数名和值放入其中。

3.3 设置请求头

在一些情况下，服务器可能要求在请求头中传递认证信息或指定数据格式等。可以通过headers参数设置请求头：

Future<dynamic> fetchDataWithHeaders() async {
  final headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  };
  final response = await http.get(Uri.parse('https://example.com/api/data'), headers: headers);
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to fetch data');
  }
}

这里设置了Content-Type为application/json，表示请求的数据格式为JSON，同时设置了Authorization头用于认证。

四、POST 请求

4.1 基本POST请求

POST请求常用于向服务器提交数据，如用户注册、登录信息等。以下是一个简单的用户注册示例：

Future<dynamic> registerUser(String username, String password) async {
  final headers = {'Content-Type': 'application/json'};
  final body = json.encode({
    'username': username,
    'password': password
  });
  final response = await http.post(Uri.parse('https://example.com/api/register'), headers: headers, body: body);
  if (response.statusCode == 201) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to register user');
  }
}

在这个代码片段中：

设置headers中的Content-Type为application/json，表示请求体是JSON格式。
使用json.encode将用户注册信息（username和password）编码为JSON字符串作为请求体。
使用http.post方法发起POST请求，传递URL、请求头和请求体。
检查响应状态码，201表示资源创建成功，将响应体解析为Dart对象返回，否则抛出异常。

4.2 POST 请求上传文件

在实际应用中，可能需要通过POST请求上传文件，比如用户上传头像。这需要使用MultipartRequest类。首先需要添加http库的multipart部分的导入：

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

以下是上传文件的示例代码：

Future<dynamic> uploadFile(File file) async {
  final uri = Uri.parse('https://example.com/api/upload');
  final request = http.MultipartRequest('POST', uri);
  final fileStream = http.ByteStream(file.openRead());
  final length = await file.length();
  final multipartFile = http.MultipartFile('file', fileStream, length, filename: file.path.split('/').last, contentType: MediaType('image', 'jpeg'));
  request.files.add(multipartFile);
  final response = await request.send();
  if (response.statusCode == 200) {
    final responseBody = await response.stream.bytesToString();
    return json.decode(responseBody);
  } else {
    throw Exception('Failed to upload file');
  }
}

代码解释：

创建MultipartRequest对象，指定请求方法为POST和请求URL。
使用http.ByteStream打开文件读取流，并获取文件长度。
创建MultipartFile对象，指定字段名（file）、文件流、文件长度、文件名和文件类型（这里假设为JPEG图片）。
将MultipartFile添加到MultipartRequest的files列表中。
发送请求并等待响应，处理响应结果。

五、PUT 请求

PUT请求通常用于更新服务器上的资源。例如，更新用户信息：

Future<dynamic> updateUser(int id, String newUsername) async {
  final headers = {'Content-Type': 'application/json'};
  final body = json.encode({
    'id': id,
    'username': newUsername
  });
  final response = await http.put(Uri.parse('https://example.com/api/user/$id'), headers: headers, body: body);
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to update user');
  }
}

在这个示例中：

设置请求头为application/json。
将更新的用户信息编码为JSON字符串作为请求体。
使用http.put方法发起PUT请求，URL中包含要更新的用户ID。
根据响应状态码处理响应结果。

六、DELETE 请求

DELETE请求用于从服务器删除资源。以下是删除用户的示例：

Future<void> deleteUser(int id) async {
  final response = await http.delete(Uri.parse('https://example.com/api/user/$id'));
  if (response.statusCode == 200) {
    print('User deleted successfully');
  } else {
    throw Exception('Failed to delete user');
  }
}

这里直接使用http.delete方法发起DELETE请求，根据响应状态码判断删除操作是否成功。

七、处理响应数据

7.1 JSON 数据处理

在Flutter网络请求中，JSON是最常见的数据格式。前面的示例中已经展示了如何使用json.decode方法将JSON格式的响应体解析为Dart对象。例如：

Future<dynamic> fetchData() async {
  final response = await http.get(Uri.parse('https://example.com/api/data'));
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to fetch data');
  }
}

如果响应数据是一个复杂的JSON结构，建议定义对应的Dart类来表示数据，这样可以提高代码的可读性和类型安全性。例如，假设响应数据是一个包含用户信息的JSON：

{
  "id": 1,
  "username": "JohnDoe",
  "email": "johndoe@example.com"
}

可以定义如下Dart类：

class User {
  final int id;
  final String username;
  final String email;

  User({required this.id, required this.username, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      username: json['username'],
      email: json['email']
    );
  }
}

然后在网络请求中使用这个类来解析数据：

Future<User> fetchUser() async {
  final response = await http.get(Uri.parse('https://example.com/api/user'));
  if (response.statusCode == 200) {
    final jsonData = json.decode(response.body);
    return User.fromJson(jsonData);
  } else {
    throw Exception('Failed to fetch user');
  }
}

7.2 XML 数据处理

虽然JSON更为常用，但在某些情况下可能会遇到XML格式的数据。可以使用xml插件来处理XML数据。首先在pubspec.yaml中添加依赖：

dependencies:
  xml: ^5.4.1

然后安装并导入：

import 'package:xml/xml.dart';

假设响应的XML数据如下：

<user>
  <id>1</id>
  <username>JohnDoe</username>
  <email>johndoe@example.com</email>
</user>

可以这样解析：

Future<User> fetchUserFromXml() async {
  final response = await http.get(Uri.parse('https://example.com/api/user.xml'));
  if (response.statusCode == 200) {
    final document = XmlDocument.parse(response.body);
    final id = int.parse(document.findElements('id').single.text);
    final username = document.findElements('username').single.text;
    final email = document.findElements('email').single.text;
    return User(id: id, username: username, email: email);
  } else {
    throw Exception('Failed to fetch user from XML');
  }
}

在这个示例中，使用XmlDocument.parse方法将XML字符串解析为XmlDocument对象，然后通过查找特定标签来提取数据。

八、错误处理

8.1 网络错误处理

在网络请求过程中，可能会遇到各种网络错误，如网络连接失败、超时等。http插件会抛出异常来表示这些错误。可以使用try-catch块来捕获并处理这些异常：

Future<dynamic> fetchDataWithErrorHandling() async {
  try {
    final response = await http.get(Uri.parse('https://example.com/api/data'));
    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to fetch data: ${response.statusCode}');
    }
  } catch (e) {
    print('Network error: $e');
    throw Exception('Network error occurred');
  }
}

在这个例子中，try块中执行网络请求，如果发生异常，catch块捕获异常并打印错误信息，同时重新抛出异常，以便上层调用者可以进一步处理。

8.2 服务器端错误处理

除了网络错误，服务器端也可能返回错误状态码，如404（未找到资源）、500（服务器内部错误）等。在前面的示例中，我们已经通过检查response.statusCode来处理这些情况。可以进一步根据不同的状态码进行更详细的处理：

Future<dynamic> fetchDataWithServerErrorHandling() async {
  final response = await http.get(Uri.parse('https://example.com/api/data'));
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else if (response.statusCode == 404) {
    throw Exception('Resource not found');
  } else if (response.statusCode == 500) {
    throw Exception('Server error');
  } else {
    throw Exception('Unexpected error: ${response.statusCode}');
  }
}

通过这种方式，可以为不同类型的服务器端错误提供更明确的错误提示。

九、网络请求优化

9.1 缓存策略

为了减少不必要的网络请求，提高应用性能，可以实施缓存策略。一种简单的方法是在本地存储网络请求的响应数据，并在一定时间内复用这些数据。可以使用shared_preferences插件来实现简单的缓存：首先在pubspec.yaml中添加依赖：

dependencies:
  shared_preferences: ^2.0.15

然后安装并导入：

import 'package:shared_preferences/shared_preferences.dart';

以下是一个带有缓存的网络请求示例：

Future<dynamic> fetchDataWithCache() async {
  final prefs = await SharedPreferences.getInstance();
  final cachedData = prefs.getString('cached_data');
  if (cachedData != null) {
    return json.decode(cachedData);
  }

  final response = await http.get(Uri.parse('https://example.com/api/data'));
  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    prefs.setString('cached_data', json.encode(data));
    return data;
  } else {
    throw Exception('Failed to fetch data');
  }
}

在这个示例中，首先检查本地缓存中是否有数据，如果有则直接返回。如果没有，则发起网络请求，请求成功后将数据缓存到本地。

9.2 批量请求

在一些情况下，可能需要同时发起多个网络请求。为了提高效率，可以使用Future.wait方法来批量处理请求。例如，同时获取用户信息和用户订单列表：

Future<List<dynamic>> fetchUserDataAndOrders() async {
  final userFuture = http.get(Uri.parse('https://example.com/api/user'));
  final ordersFuture = http.get(Uri.parse('https://example.com/api/orders'));
  final results = await Future.wait([userFuture, ordersFuture]);
  final userResponse = results[0];
  final ordersResponse = results[1];
  if (userResponse.statusCode == 200 && ordersResponse.statusCode == 200) {
    final userData = json.decode(userResponse.body);
    final ordersData = json.decode(ordersResponse.body);
    return [userData, ordersData];
  } else {
    throw Exception('Failed to fetch user data or orders');
  }
}

在这个例子中，同时发起获取用户信息和订单列表的请求，使用Future.wait等待两个请求都完成，然后处理响应结果。

9.3 优化请求频率

避免在短时间内频繁发起相同的网络请求，这不仅会消耗用户的流量，还可能对服务器造成压力。可以通过设置一个时间间隔来限制请求频率。例如，使用Timer来控制：

class RequestThrottle {
  static const int throttleDuration = 5000; // 5 seconds
  DateTime? lastRequestTime;

  Future<dynamic> fetchDataWithThrottle() async {
    if (lastRequestTime != null && DateTime.now().difference(lastRequestTime!) < Duration(milliseconds: throttleDuration)) {
      print('Request throttled, please wait');
      return;
    }
    lastRequestTime = DateTime.now();
    final response = await http.get(Uri.parse('https://example.com/api/data'));
    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to fetch data');
    }
  }
}

在这个RequestThrottle类中，记录上次请求的时间，每次请求前检查时间间隔是否小于设定的节流时间，如果是则提示用户等待，否则发起请求并更新上次请求时间。

十、与Flutter UI结合

10.1 在StatefulWidget中使用网络请求

在Flutter应用中，通常在StatefulWidget中发起网络请求并更新UI。以下是一个简单的示例，展示如何在StatefulWidget中获取用户列表并显示在ListView中：

class UserListPage extends StatefulWidget {
  @override
  _UserListPageState createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {
  List<dynamic> users = [];
  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  Future<void> fetchUsers() async {
    setState(() {
      isLoading = true;
    });
    try {
      final response = await http.get(Uri.parse('https://example.com/api/users'));
      if (response.statusCode == 200) {
        setState(() {
          users = List<dynamic>.from(json.decode(response.body));
          isLoading = false;
        });
      } else {
        throw Exception('Failed to load users');
      }
    } catch (e) {
      setState(() {
        isLoading = false;
      });
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: isLoading
         ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user['username']),
                  subtitle: Text(user['email']),
                );
              },
            ),
    );
  }
}

在这个示例中：

在initState方法中发起网络请求fetchUsers。
使用isLoading变量来控制是否显示加载指示器。
在fetchUsers方法中，请求前设置isLoading为true，请求成功或失败后设置为false，并根据响应结果更新users列表。
在build方法中，根据isLoading的值显示加载指示器或用户列表。

10.2 使用Provider管理网络数据

为了更好地管理网络数据并在多个组件中共享，可以使用provider插件。首先在pubspec.yaml中添加依赖：

dependencies:
  provider: ^6.0.5

然后安装并导入：

import 'package:provider/provider.dart';

以下是一个简单的示例，展示如何使用provider来管理用户数据：

class UserProvider with ChangeNotifier {
  List<dynamic> users = [];
  bool isLoading = false;

  Future<void> fetchUsers() async {
    isLoading = true;
    notifyListeners();
    try {
      final response = await http.get(Uri.parse('https://example.com/api/users'));
      if (response.statusCode == 200) {
        users = List<dynamic>.from(json.decode(response.body));
        isLoading = false;
      } else {
        throw Exception('Failed to load users');
      }
    } catch (e) {
      isLoading = false;
      print('Error: $e');
    }
    notifyListeners();
  }
}

在main.dart中，将UserProvider提供给整个应用：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => UserProvider(),
      child: MyApp(),
    ),
  );
}

然后在需要使用用户数据的组件中，可以通过Provider获取数据：

class UserListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: userProvider.isLoading
         ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: userProvider.users.length,
              itemBuilder: (context, index) {
                final user = userProvider.users[index];
                return ListTile(
                  title: Text(user['username']),
                  subtitle: Text(user['email']),
                );
              },
            ),
    );
  }
}

在这个示例中，UserProvider负责管理用户数据和加载状态，通过ChangeNotifierProvider将其提供给应用，组件通过Provider.of获取数据并根据加载状态显示相应UI。

通过以上详细的介绍和示例代码，相信开发者能够熟练掌握使用http插件在Flutter中进行网络请求的各种技巧，从基本的请求方法到复杂的优化策略，以及与Flutter UI的结合，为开发高质量的移动应用打下坚实基础。

使用 http 插件进行 Flutter 网络请求的实战指南

一、Flutter 网络请求概述

二、http插件介绍

2.1 插件特点

2.2 安装与导入

三、GET 请求

3.1 基本GET请求

3.2 GET 请求带参数

3.3 设置请求头

四、POST 请求

4.1 基本POST请求

4.2 POST 请求上传文件

五、PUT 请求

六、DELETE 请求

七、处理响应数据

7.1 JSON 数据处理

7.2 XML 数据处理

八、错误处理

8.1 网络错误处理

8.2 服务器端错误处理

九、网络请求优化

9.1 缓存策略

9.2 批量请求

9.3 优化请求频率

十、与Flutter UI结合

10.1 在StatefulWidget中使用网络请求

10.2 使用Provider管理网络数据

二、`http`插件介绍