Flutter 网络请求：与后端数据交互

引言 / 什么是Flutter网络请求

在移动应用开发中，与后端服务器进行数据交互是必不可少的功能。Flutter作为跨平台开发框架，提供了多种方式来实现网络请求，无论是简单的GET请求还是复杂的POST请求，都能轻松应对。本文将详细介绍Flutter中常用的网络请求方法，包括官方推荐的http包和功能更强大的Dio库，并通过实际案例展示如何获取后端数据并展示在界面上。

掌握Flutter网络请求技术，可以帮助开发者构建功能更丰富的应用，如天气查询、新闻资讯、社交媒体等需要实时数据交互的场景。无论是初学者还是有经验的开发者，都能从本文中获得实用的网络请求解决方案。

常用网络库介绍

http包：Flutter官方推荐的基础库

http是Flutter官方推荐的基础网络请求库，简单易用，适合处理基本的HTTP请求。它提供了get()、post()、put()等方法，支持设置请求头、查询参数等。

特点：

• 轻量级，依赖少
• 简单API设计
• 适合小型项目或简单请求

安装： 在pubspec.yaml文件中添加依赖：

dependencies:
  http: ^1.1.0

然后运行flutter pub get安装。

Dio库：功能强大的第三方网络库

Dio是一个功能强大的第三方HTTP客户端库，支持拦截器、全局配置、FormData上传、文件下载等高级功能。

特点：

• 支持拦截器，可统一处理请求和响应
• 支持取消请求
• 支持并发请求
• 支持FormData上传
• 支持文件下载
• 支持超时设置

安装： 在pubspec.yaml文件中添加依赖：

dependencies:
  dio: ^5.4.0

然后运行flutter pub get安装。

基础网络请求实现

使用http包发送GET请求

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

Future<void> fetchData() async {
  try {
    final response = await http.get(
      Uri.parse('https://api.example.com/data'),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_token_here',
      },
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      print('获取的数据: $data');
    } else {
      print('请求失败，状态码: ${response.statusCode}');
    }
  } catch (e) {
    print('请求异常: $e');
  }
}

使用http包发送POST请求

Future<void> postData() async {
  try {
    final response = await http.post(
      Uri.parse('https://api.example.com/data'),
      headers: {
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'name': 'Flutter',
        'version': '3.0',
      }),
    );

    if (response.statusCode == 201) {
      print('创建成功: ${response.body}');
    } else {
      print('创建失败，状态码: ${response.statusCode}');
    }
  } catch (e) {
    print('请求异常: $e');
  }
}

使用Dio库实现高级功能

配置Dio客户端

import 'package:dio/dio.dart';

final dio = Dio(
  BaseOptions(
    baseUrl: 'https://api.example.com',
    connectTimeout: 5000, // 5秒
    receiveTimeout: 3000, // 3秒
    headers: {
      'Content-Type': 'application/json',
    },
  ),
);

添加拦截器

dio.interceptors.add(
  InterceptorsWrapper(
    onRequest: (options, handler) {
      // 在发送请求前添加token
      options.headers['Authorization'] = 'Bearer your_token_here';
      return handler.next(options);
    },
    onResponse: (response, handler) {
      // 在响应返回后处理数据
      print('响应数据: ${response.data}');
      return handler.next(response);
    },
    onError: (DioError e, handler) {
      // 在请求出错时处理错误
      print('请求出错: ${e.message}');
      return handler.next(e);
    },
  ),
);

发送GET请求

Future<void> fetchDataWithDio() async {
  try {
    final response = await dio.get('/data');
    if (response.statusCode == 200) {
      print('获取的数据: ${response.data}');
    }
  } catch (e) {
    print('请求异常: $e');
  }
}

发送POST请求

Future<void> postDataWithDio() async {
  try {
    final response = await dio.post(
      '/data',
      data: {
        'name': 'Flutter',
        'version': '3.0',
      },
    );
    if (response.statusCode == 201) {
      print('创建成功: ${response.data}');
    }
  } catch (e) {
    print('请求异常: $e');
  }
}

实际案例：天气查询应用

创建天气数据模型

class Weather {
  final String city;
  final String condition;
  final double temperature;
  final String iconUrl;

  Weather({
    required this.city,
    required this.condition,
    required this.temperature,
    required this.iconUrl,
  });

  factory Weather.fromJson(Map<String, dynamic> json) {
    return Weather(
      city: json['city'],
      condition: json['condition'],
      temperature: json['temperature'].toDouble(),
      iconUrl: json['iconUrl'],
    );
  }
}

实现天气查询功能

Future<Weather?> fetchWeather(String cityName) async {
  try {
    final response = await dio.get(
      '/weather',
      queryParameters: {'city': cityName},
    );

    if (response.statusCode == 200 && response.data is Map<String, dynamic>) {
      return Weather.fromJson(response.data);
    }
  } catch (e) {
    print('获取天气数据失败: $e');
  }
  return null;
}

在界面上展示天气数据

import 'package:flutter/material.dart';

class WeatherPage extends StatefulWidget {
  @override
  _WeatherPageState createState() => _WeatherPageState();
}

class _WeatherPageState extends State<WeatherPage> {
  final TextEditingController _cityController = TextEditingController();
  Weather? _weather;

  Future<void> _searchWeather() async {
    final weather = await fetchWeather(_cityController.text);
    setState(() {
      _weather = weather;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('天气查询')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _cityController,
              decoration: InputDecoration(
                labelText: '输入城市名称',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _searchWeather,
              child: Text('查询天气'),
            ),
            SizedBox(height: 32),
            if (_weather != null)
              Column(
                children: [
                  Text(
                    '${_weather!.city}天气',
                    style: TextStyle(fontSize: 24),
                  ),
                  SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.network(_weather!.iconUrl, width: 64, height: 64),
                      SizedBox(width: 16),
                      Text(
                        '${_weather!.temperature}°C',
                        style: TextStyle(fontSize: 32),
                      ),
                    ],
                  ),
                  SizedBox(height: 8),
                  Text(_weather!.condition),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

常见问题

Q：Flutter网络请求中如何处理跨域问题？

A：跨域问题通常需要后端服务器配置CORS（跨域资源共享）头信息。在开发阶段，可以在Android和iOS项目中配置允许本地开发服务器访问：

• Android：在android/app/src/main/AndroidManifest.xml中添加android:usesCleartextTraffic="true"
• iOS：在ios/Runner/Info.plist中添加网络权限配置

Q：如何取消Flutter中的网络请求？

A：使用Dio库时，可以通过CancelToken取消请求：

final cancelToken = CancelToken();
dio.get('/data', cancelToken: cancelToken).catchError((e) {
  if (e is DioError && e.type == DioErrorType.cancel) {
    print('请求已取消');
  }
});
// 取消请求
cancelToken.cancel('用户取消了请求');

Q：如何处理网络请求中的JSON序列化/反序列化？

A：可以使用dart:convert包中的jsonDecode()和jsonEncode()方法，或者使用更强大的json_serializable包自动生成模型类的序列化代码。

小结

本文详细介绍了Flutter中实现网络请求的两种主要方式：使用官方http包和功能更强大的Dio库。通过基础请求示例和实际天气查询案例，展示了如何发送GET/POST请求、处理响应数据以及在界面上展示后端数据。

掌握这些网络请求技术后，你可以：

1. 根据项目需求选择合适的网络库
2. 实现各种类型的HTTP请求
3. 添加拦截器统一处理请求和响应
4. 构建需要实时数据交互的Flutter应用

建议开发者在实际项目中尝试使用Dio库，它提供了更丰富的功能和更好的错误处理机制。同时，注意处理网络异常和添加适当的加载状态，以提升用户体验。