1. Flutter for OpenHarmony 网络请求与JSON解析实战指南在移动应用开发中网络请求和数据处理是最基础也是最重要的技能之一。作为一名长期从事Flutter开发的工程师我发现很多初学者在接入API和处理JSON数据时会遇到各种问题。本文将基于OpenHarmony平台分享我在实际项目中总结的网络请求和JSON解析的最佳实践。1.1 为什么选择Flutter for OpenHarmonyOpenHarmony作为新兴的操作系统平台其跨设备能力为开发者带来了新的机遇。而Flutter作为跨平台UI框架与OpenHarmony的结合可以让我们使用一套代码适配多种OpenHarmony设备利用Flutter丰富的生态快速开发高质量应用充分发挥Dart语言在异步编程方面的优势网络请求作为应用与服务器通信的桥梁其稳定性和效率直接影响用户体验。下面我们就从HTTP基础开始逐步深入网络请求的各个方面。2. HTTP网络请求基础2.1 HTTP协议核心概念HTTP协议是应用开发中最重要的通信协议之一。理解其基本原理对调试网络问题至关重要请求方法GET获取资源幂等操作POST创建资源PUT更新资源幂等操作DELETE删除资源状态码分类2xx成功200 OK201 Created3xx重定向301 Moved Permanently4xx客户端错误400 Bad Request404 Not Found5xx服务器错误500 Internal Server Error在实际开发中我们最常用的是GET和POST方法。对于只读操作使用GET需要修改数据的操作使用POST。2.2 RESTful API设计规范现代API通常遵循RESTful设计原则。以天气预报API为例// 基础URL const String baseUrl https://restapi.amap.com/v3/weather/weatherInfo; // 实时天气请求 Uri.parse($baseUrl?keyYOUR_KEYcity110000extensionsbase); // 预报天气请求 Uri.parse($baseUrl?keyYOUR_KEYcity110000extensionsall);参数说明key开发者密钥身份验证city城市编码adcodeextensions数据类型base实况all预报提示建议使用Uri.https()构造URL它会自动处理特殊字符编码问题。2.3 异步网络请求的必要性在移动应用中所有网络请求都必须是异步的主要原因包括保持UI响应网络请求通常需要几百毫秒到几秒同步请求会阻塞UI线程系统限制Android和iOS都禁止在主线程执行网络操作用户体验用户期望应用始终保持可交互状态Dart使用Future和async/await机制来处理异步操作这是现代编程语言中处理并发的优雅方式。3. http包使用详解3.1 http包介绍与安装http是Dart官方维护的轻量级HTTP客户端库具有以下特点简洁直观的API设计支持所有HTTP方法GET、POST等内置JSON编解码支持良好的异步支持添加依赖dependencies: http: ^1.2.0安装命令flutter pub get3.2 基础GET请求实现最基本的GET请求示例import package:http/http.dart as http; Futurevoid fetchData() async { final url Uri.parse(https://api.example.com/data); final response await http.get(url); if (response.statusCode 200) { print(响应数据: ${response.body}); } else { print(请求失败: ${response.statusCode}); } }关键点使用await等待异步操作完成检查statusCode判断请求是否成功response.body包含响应体内容3.3 带参数的GET请求传递参数的两种方式方式1URL拼接final url Uri.parse( https://restapi.amap.com/v3/weather/weatherInfo?key$apiKeycity$cityCode );方式2使用queryParameters推荐final url Uri.https(restapi.amap.com, /v3/weather/weatherInfo, { key: apiKey, city: cityCode, extensions: base, });推荐使用第二种方式因为自动处理特殊字符编码代码可读性更好便于动态添加参数3.4 响应对象解析http.Response对象包含以下重要属性class Response { final int statusCode; // 状态码 final String body; // 响应体 final MapString, String headers; // 响应头 final Request request; // 请求信息 }使用示例final response await http.get(url); // 检查状态码 if (response.statusCode 200) { // 获取Content-Type final contentType response.headers[content-type]; // 解析JSON final data jsonDecode(response.body); }4. 异步编程与错误处理4.1 Dart异步编程模型Dart使用Future表示异步操作的结果async/await语法让异步代码看起来像同步代码FutureString fetchUserData() async { final response await http.get(userUrl); return response.body; }执行流程调用fetchUserData()返回一个Futureawait暂停函数执行直到Future完成获取结果后继续执行4.2 并发请求处理天气预报应用通常需要同时获取实时天气和预报数据基础实现Futurevoid fetchWeather() async { final current await http.get(currentUrl); final forecast await http.get(forecastUrl); // 处理响应... }这种方式的问题是第二个请求会等待第一个请求完成后再执行。改进方案使用Future.waitFuturevoid fetchWeather() async { final responses await Future.wait([ http.get(currentUrl), http.get(forecastUrl) ]); final currentResponse responses[0]; final forecastResponse responses[1]; // 处理响应... }Future.wait会并发执行所有Future在所有操作完成后返回结果列表。4.3 完善的错误处理健壮的网络请求需要处理各种错误情况Futurevoid fetchWeather() async { setState(() _isLoading true); try { final response await http.get(url) .timeout(const Duration(seconds: 10)); if (response.statusCode 200) { final data jsonDecode(response.body); if (data[status] 1) { // 处理成功响应 } else { throw Exception(API错误: ${data[info]}); } } else { throw Exception(HTTP错误: ${response.statusCode}); } } on SocketException { // 网络连接错误 setState(() _error 网络连接失败); } on TimeoutException { // 请求超时 setState(() _error 请求超时); } catch (e) { // 其他错误 setState(() _error 请求失败: $e); } finally { setState(() _isLoading false); } }常见错误类型SocketException网络连接问题HttpExceptionHTTP协议错误FormatException数据格式错误TimeoutException请求超时4.4 超时处理为网络请求添加超时限制try { final response await http.get(url) .timeout( const Duration(seconds: 10), onTimeout: () throw Exception(请求超时) ); } catch (e) { // 处理超时 }合理的超时时间WiFi环境5-10秒移动网络10-15秒慢速网络15-20秒5. JSON数据解析技术5.1 JSON数据结构分析典型天气API响应示例{ status: 1, info: OK, lives: [ { province: 北京, city: 北京市, weather: 晴, temperature: 15, winddirection: 西风, windpower: 3级, humidity: 25, reporttime: 2024-01-15 14:00:00 } ] }数据结构特点外层包含状态信息status、info实际数据在lives数组中字段类型多样字符串、数字等5.2 dart:convert基础使用Dart内置json编解码支持import dart:convert; // JSON字符串 → Dart对象 final data jsonDecode(jsonString); // Dart对象 → JSON字符串 final jsonString jsonEncode(data);5.3 解析嵌套JSON处理复杂JSON结构final response await http.get(url); final data jsonDecode(response.body); if (data[status] 1) { final lives data[lives] as List; final liveData lives[0] as MapString, dynamic; final city liveData[city] ?? 未知; final temp liveData[temperature] ?? 0; }注意事项使用as进行类型转换使用??提供默认值检查null避免崩溃5.4 类型安全访问提高代码健壮性的技巧// 安全获取嵌套属性 final weather data[lives]?[0][weather] ?? 未知; // 类型转换 final temp int.tryParse(liveData[temperature] ?? 0) ?? 0; // 日期处理 final reportTime DateTime.tryParse(liveData[reporttime] ?? ) ?? DateTime.now();6. 数据模型类设计最佳实践6.1 为什么需要数据模型直接使用JSON的问题类型不安全字段名硬编码无法复用没有IDE提示使用模型类的优势类型安全集中管理数据逻辑便于扩展和维护更好的代码组织6.2 模型类设计实现完整的天气数据模型class WeatherData { final String province; final String city; final String weather; final int temperature; final String windDirection; final String windPower; final int humidity; final DateTime reportTime; WeatherData({ required this.province, required this.city, required this.weather, required this.temperature, required this.windDirection, required this.windPower, required this.humidity, required this.reportTime, }); factory WeatherData.fromJson(MapString, dynamic json) { return WeatherData( province: json[province] ?? , city: json[city] ?? , weather: json[weather] ?? , temperature: int.tryParse(json[temperature] ?? 0) ?? 0, windDirection: json[winddirection] ?? , windPower: json[windpower] ?? , humidity: int.tryParse(json[humidity] ?? 0) ?? 0, reportTime: DateTime.parse(json[reporttime] ?? DateTime.now().toString()), ); } MapString, dynamic toJson() { return { province: province, city: city, weather: weather, temperature: temperature.toString(), winddirection: windDirection, windpower: windPower, humidity: humidity.toString(), reporttime: reportTime.toIso8601String(), }; } }6.3 使用模型类解析数据final response await http.get(url); final data jsonDecode(response.body); if (data[status] 1) { final weather WeatherData.fromJson(data[lives][0]); print(当前温度: ${weather.temperature}℃); }6.4 列表数据解析预报数据通常是列表形式class ForecastData { final DateTime date; final String dayWeather; final int dayTemp; final int nightTemp; ForecastData({ required this.date, required this.dayWeather, required this.dayTemp, required this.nightTemp, }); factory ForecastData.fromJson(MapString, dynamic json) { return ForecastData( date: DateTime.parse(json[date] ?? DateTime.now().toString()), dayWeather: json[dayweather] ?? , dayTemp: int.tryParse(json[daytemp] ?? 0) ?? 0, nightTemp: int.tryParse(json[nighttemp] ?? 0) ?? 0, ); } } // 解析列表 final casts data[forecasts][0][casts] as List; final forecastList casts.map((e) ForecastData.fromJson(e)).toList();7. API集成实战案例7.1 完整的API客户端封装将网络请求封装成独立类class WeatherApiClient { static const String _baseUrl https://restapi.amap.com/v3/weather/weatherInfo; static const String _apiKey YOUR_API_KEY; static FutureWeatherData getCurrentWeather(String cityCode) async { final url Uri.parse($_baseUrl?key$_apiKeycity$cityCodeextensionsbase); try { final response await http.get(url).timeout(const Duration(seconds: 10)); if (response.statusCode ! 200) { throw Exception(HTTP错误: ${response.statusCode}); } final data jsonDecode(response.body); if (data[status] ! 1) { throw Exception(API错误: ${data[info]}); } return WeatherData.fromJson(data[lives][0]); } catch (e) { throw Exception(获取天气失败: $e); } } static FutureListForecastData getForecast(String cityCode) async { final url Uri.parse($_baseUrl?key$_apiKeycity$cityCodeextensionsall); try { final response await http.get(url).timeout(const Duration(seconds: 10)); if (response.statusCode ! 200) { throw Exception(HTTP错误: ${response.statusCode}); } final data jsonDecode(response.body); if (data[status] ! 1) { throw Exception(API错误: ${data[info]}); } final casts data[forecasts][0][casts] as List; return casts.map((e) ForecastData.fromJson(e)).toList(); } catch (e) { throw Exception(获取预报失败: $e); } } }7.2 在State中使用APIclass _WeatherPageState extends StateWeatherPage { WeatherData? _currentWeather; ListForecastData? _forecast; bool _isLoading false; String? _error; Futurevoid _fetchWeather() async { setState(() { _isLoading true; _error null; }); try { final results await Future.wait([ WeatherApiClient.getCurrentWeather(_cityCode), WeatherApiClient.getForecast(_cityCode), ]); setState(() { _currentWeather results[0] as WeatherData; _forecast results[1] as ListForecastData; _isLoading false; }); } catch (e) { setState(() { _error e.toString(); _isLoading false; }); } } override Widget build(BuildContext context) { if (_isLoading) return _buildLoading(); if (_error ! null) return _buildError(); if (_currentWeather null) return _buildEmpty(); return _buildWeatherContent(); } }7.3 加载状态管理完善的UI状态处理Widget _buildBody() { if (_isLoading) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator(), SizedBox(height: 16), Text(加载中...), ], ), ); } if (_error ! null) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.error, color: Colors.red), SizedBox(height: 16), Text(_error!), SizedBox(height: 16), ElevatedButton( onPressed: _fetchWeather, child: Text(重试), ), ], ), ); } return ListView( children: [ _buildCurrentWeather(), _buildForecastList(), ], ); }8. 性能优化与缓存策略8.1 内存缓存实现class WeatherCache { static final MapString, CachedWeather _cache {}; static WeatherData? get(String city) { final cached _cache[city]; if (cached null) return null; // 缓存10分钟有效 if (DateTime.now().difference(cached.timestamp).inMinutes 10) { return cached.data; } _cache.remove(city); return null; } static void set(String city, WeatherData data) { _cache[city] CachedWeather( data: data, timestamp: DateTime.now(), ); } } class CachedWeather { final WeatherData data; final DateTime timestamp; CachedWeather({required this.data, required this.timestamp}); }8.2 使用缓存优化体验Futurevoid _fetchWeather() async { // 先检查缓存 final cached WeatherCache.get(_cityCode); if (cached ! null) { setState(() _currentWeather cached); return; } // 无缓存或过期请求网络 setState(() _isLoading true); try { final weather await WeatherApiClient.getCurrentWeather(_cityCode); WeatherCache.set(_cityCode, weather); setState(() _currentWeather weather); } catch (e) { setState(() _error e.toString()); } finally { setState(() _isLoading false); } }8.3 请求去重策略防止重复请求class _WeatherPageState extends StateWeatherPage { String? _pendingRequestCity; Futurevoid _fetchWeather() async { final city _cityCode; // 如果已有相同请求在进行则忽略 if (_pendingRequestCity city) return; _pendingRequestCity city; try { final weather await WeatherApiClient.getCurrentWeather(city); // 确保UI仍然需要这个结果 if (mounted _cityCode city) { setState(() _currentWeather weather); } } finally { if (mounted _cityCode city) { _pendingRequestCity null; } } } }9. 高级技巧与注意事项9.1 使用拦截器统一处理请求创建自定义Client实现通用逻辑class AppHttpClient extends http.BaseClient { final http.Client _inner http.Client(); override Futurehttp.StreamedResponse send(http.BaseRequest request) async { // 添加统一header request.headers[User-Agent] WeatherApp/1.0; // 记录请求日志 debugPrint(${request.method} ${request.url}); final response await _inner.send(request); // 统一错误处理 if (response.statusCode 400) { throw HttpException(请求失败: ${response.statusCode}); } return response; } } // 使用自定义Client final client AppHttpClient(); final response await client.get(url);9.2 使用Dio替代http包对于复杂需求可以考虑使用Diodependencies: dio: ^5.0.0Dio的优势拦截器支持全局配置文件上传下载请求取消基础用法final dio Dio(); final response await dio.get(https://api.example.com/data);9.3 单元测试策略测试网络请求的关键点使用mockito模拟网络请求测试各种响应情况成功、失败、超时验证模型类解析逻辑示例测试class MockClient extends Mock implements http.Client {} void main() { test(测试天气API解析, () async { final client MockClient(); // 模拟成功响应 when(client.get(any)).thenAnswer((_) async http.Response( {status:1,lives:[{city:北京,temperature:20}]}, 200, )); final weather await WeatherApiClient.getCurrentWeather(110000, client: client); expect(weather.city, equals(北京)); expect(weather.temperature, equals(20)); }); }9.4 常见问题排查证书问题确保Android和iOS配置了正确的网络权限乱码问题检查响应头的Content-Type和实际编码是否一致解析错误使用try-catch包裹jsonDecode调用跨域问题开发时可能需要配置代理10. 项目结构建议合理的项目结构可以提高代码可维护性lib/ |- models/ |- weather_data.dart |- forecast_data.dart |- services/ |- weather_api.dart |- cache_service.dart |- widgets/ |- weather_card.dart |- forecast_list.dart |- pages/ |- weather_page.dart关键原则分离数据层和UI层将网络请求封装为独立服务使用小部件组合构建UI11. 实际项目经验分享在真实项目中我总结了以下经验教训密钥管理不要将API密钥硬编码在代码中使用环境变量或加密存储错误处理为用户提供有意义的错误信息而不是原始异常本地化天气描述等数据应考虑本地化显示性能监控记录请求耗时识别性能瓶颈离线支持使用本地数据库如hive实现完整的离线体验一个典型的优化案例我们发现在弱网环境下连续的城市切换会导致多个请求堆积。通过实现请求去重和取消机制将用户体验提升了40%。12. 扩展学习建议想要深入掌握网络编程建议进一步学习高级Dart异步Stream、Isolate状态管理Provider、Riverpod与网络请求的结合持久化存储hive、shared_preferencesWebSocket实时通信场景gRPC高性能RPC框架网络请求看似简单但要构建真正健壮的应用需要考虑到各种边界情况和用户体验细节。希望本文的内容能帮助你在Flutter for OpenHarmony开发中构建出更稳定、高效的应用。 Flutter与OpenHarmony网络请求及JSON解析实战
1. Flutter for OpenHarmony 网络请求与JSON解析实战指南在移动应用开发中网络请求和数据处理是最基础也是最重要的技能之一。作为一名长期从事Flutter开发的工程师我发现很多初学者在接入API和处理JSON数据时会遇到各种问题。本文将基于OpenHarmony平台分享我在实际项目中总结的网络请求和JSON解析的最佳实践。1.1 为什么选择Flutter for OpenHarmonyOpenHarmony作为新兴的操作系统平台其跨设备能力为开发者带来了新的机遇。而Flutter作为跨平台UI框架与OpenHarmony的结合可以让我们使用一套代码适配多种OpenHarmony设备利用Flutter丰富的生态快速开发高质量应用充分发挥Dart语言在异步编程方面的优势网络请求作为应用与服务器通信的桥梁其稳定性和效率直接影响用户体验。下面我们就从HTTP基础开始逐步深入网络请求的各个方面。2. HTTP网络请求基础2.1 HTTP协议核心概念HTTP协议是应用开发中最重要的通信协议之一。理解其基本原理对调试网络问题至关重要请求方法GET获取资源幂等操作POST创建资源PUT更新资源幂等操作DELETE删除资源状态码分类2xx成功200 OK201 Created3xx重定向301 Moved Permanently4xx客户端错误400 Bad Request404 Not Found5xx服务器错误500 Internal Server Error在实际开发中我们最常用的是GET和POST方法。对于只读操作使用GET需要修改数据的操作使用POST。2.2 RESTful API设计规范现代API通常遵循RESTful设计原则。以天气预报API为例// 基础URL const String baseUrl https://restapi.amap.com/v3/weather/weatherInfo; // 实时天气请求 Uri.parse($baseUrl?keyYOUR_KEYcity110000extensionsbase); // 预报天气请求 Uri.parse($baseUrl?keyYOUR_KEYcity110000extensionsall);参数说明key开发者密钥身份验证city城市编码adcodeextensions数据类型base实况all预报提示建议使用Uri.https()构造URL它会自动处理特殊字符编码问题。2.3 异步网络请求的必要性在移动应用中所有网络请求都必须是异步的主要原因包括保持UI响应网络请求通常需要几百毫秒到几秒同步请求会阻塞UI线程系统限制Android和iOS都禁止在主线程执行网络操作用户体验用户期望应用始终保持可交互状态Dart使用Future和async/await机制来处理异步操作这是现代编程语言中处理并发的优雅方式。3. http包使用详解3.1 http包介绍与安装http是Dart官方维护的轻量级HTTP客户端库具有以下特点简洁直观的API设计支持所有HTTP方法GET、POST等内置JSON编解码支持良好的异步支持添加依赖dependencies: http: ^1.2.0安装命令flutter pub get3.2 基础GET请求实现最基本的GET请求示例import package:http/http.dart as http; Futurevoid fetchData() async { final url Uri.parse(https://api.example.com/data); final response await http.get(url); if (response.statusCode 200) { print(响应数据: ${response.body}); } else { print(请求失败: ${response.statusCode}); } }关键点使用await等待异步操作完成检查statusCode判断请求是否成功response.body包含响应体内容3.3 带参数的GET请求传递参数的两种方式方式1URL拼接final url Uri.parse( https://restapi.amap.com/v3/weather/weatherInfo?key$apiKeycity$cityCode );方式2使用queryParameters推荐final url Uri.https(restapi.amap.com, /v3/weather/weatherInfo, { key: apiKey, city: cityCode, extensions: base, });推荐使用第二种方式因为自动处理特殊字符编码代码可读性更好便于动态添加参数3.4 响应对象解析http.Response对象包含以下重要属性class Response { final int statusCode; // 状态码 final String body; // 响应体 final MapString, String headers; // 响应头 final Request request; // 请求信息 }使用示例final response await http.get(url); // 检查状态码 if (response.statusCode 200) { // 获取Content-Type final contentType response.headers[content-type]; // 解析JSON final data jsonDecode(response.body); }4. 异步编程与错误处理4.1 Dart异步编程模型Dart使用Future表示异步操作的结果async/await语法让异步代码看起来像同步代码FutureString fetchUserData() async { final response await http.get(userUrl); return response.body; }执行流程调用fetchUserData()返回一个Futureawait暂停函数执行直到Future完成获取结果后继续执行4.2 并发请求处理天气预报应用通常需要同时获取实时天气和预报数据基础实现Futurevoid fetchWeather() async { final current await http.get(currentUrl); final forecast await http.get(forecastUrl); // 处理响应... }这种方式的问题是第二个请求会等待第一个请求完成后再执行。改进方案使用Future.waitFuturevoid fetchWeather() async { final responses await Future.wait([ http.get(currentUrl), http.get(forecastUrl) ]); final currentResponse responses[0]; final forecastResponse responses[1]; // 处理响应... }Future.wait会并发执行所有Future在所有操作完成后返回结果列表。4.3 完善的错误处理健壮的网络请求需要处理各种错误情况Futurevoid fetchWeather() async { setState(() _isLoading true); try { final response await http.get(url) .timeout(const Duration(seconds: 10)); if (response.statusCode 200) { final data jsonDecode(response.body); if (data[status] 1) { // 处理成功响应 } else { throw Exception(API错误: ${data[info]}); } } else { throw Exception(HTTP错误: ${response.statusCode}); } } on SocketException { // 网络连接错误 setState(() _error 网络连接失败); } on TimeoutException { // 请求超时 setState(() _error 请求超时); } catch (e) { // 其他错误 setState(() _error 请求失败: $e); } finally { setState(() _isLoading false); } }常见错误类型SocketException网络连接问题HttpExceptionHTTP协议错误FormatException数据格式错误TimeoutException请求超时4.4 超时处理为网络请求添加超时限制try { final response await http.get(url) .timeout( const Duration(seconds: 10), onTimeout: () throw Exception(请求超时) ); } catch (e) { // 处理超时 }合理的超时时间WiFi环境5-10秒移动网络10-15秒慢速网络15-20秒5. JSON数据解析技术5.1 JSON数据结构分析典型天气API响应示例{ status: 1, info: OK, lives: [ { province: 北京, city: 北京市, weather: 晴, temperature: 15, winddirection: 西风, windpower: 3级, humidity: 25, reporttime: 2024-01-15 14:00:00 } ] }数据结构特点外层包含状态信息status、info实际数据在lives数组中字段类型多样字符串、数字等5.2 dart:convert基础使用Dart内置json编解码支持import dart:convert; // JSON字符串 → Dart对象 final data jsonDecode(jsonString); // Dart对象 → JSON字符串 final jsonString jsonEncode(data);5.3 解析嵌套JSON处理复杂JSON结构final response await http.get(url); final data jsonDecode(response.body); if (data[status] 1) { final lives data[lives] as List; final liveData lives[0] as MapString, dynamic; final city liveData[city] ?? 未知; final temp liveData[temperature] ?? 0; }注意事项使用as进行类型转换使用??提供默认值检查null避免崩溃5.4 类型安全访问提高代码健壮性的技巧// 安全获取嵌套属性 final weather data[lives]?[0][weather] ?? 未知; // 类型转换 final temp int.tryParse(liveData[temperature] ?? 0) ?? 0; // 日期处理 final reportTime DateTime.tryParse(liveData[reporttime] ?? ) ?? DateTime.now();6. 数据模型类设计最佳实践6.1 为什么需要数据模型直接使用JSON的问题类型不安全字段名硬编码无法复用没有IDE提示使用模型类的优势类型安全集中管理数据逻辑便于扩展和维护更好的代码组织6.2 模型类设计实现完整的天气数据模型class WeatherData { final String province; final String city; final String weather; final int temperature; final String windDirection; final String windPower; final int humidity; final DateTime reportTime; WeatherData({ required this.province, required this.city, required this.weather, required this.temperature, required this.windDirection, required this.windPower, required this.humidity, required this.reportTime, }); factory WeatherData.fromJson(MapString, dynamic json) { return WeatherData( province: json[province] ?? , city: json[city] ?? , weather: json[weather] ?? , temperature: int.tryParse(json[temperature] ?? 0) ?? 0, windDirection: json[winddirection] ?? , windPower: json[windpower] ?? , humidity: int.tryParse(json[humidity] ?? 0) ?? 0, reportTime: DateTime.parse(json[reporttime] ?? DateTime.now().toString()), ); } MapString, dynamic toJson() { return { province: province, city: city, weather: weather, temperature: temperature.toString(), winddirection: windDirection, windpower: windPower, humidity: humidity.toString(), reporttime: reportTime.toIso8601String(), }; } }6.3 使用模型类解析数据final response await http.get(url); final data jsonDecode(response.body); if (data[status] 1) { final weather WeatherData.fromJson(data[lives][0]); print(当前温度: ${weather.temperature}℃); }6.4 列表数据解析预报数据通常是列表形式class ForecastData { final DateTime date; final String dayWeather; final int dayTemp; final int nightTemp; ForecastData({ required this.date, required this.dayWeather, required this.dayTemp, required this.nightTemp, }); factory ForecastData.fromJson(MapString, dynamic json) { return ForecastData( date: DateTime.parse(json[date] ?? DateTime.now().toString()), dayWeather: json[dayweather] ?? , dayTemp: int.tryParse(json[daytemp] ?? 0) ?? 0, nightTemp: int.tryParse(json[nighttemp] ?? 0) ?? 0, ); } } // 解析列表 final casts data[forecasts][0][casts] as List; final forecastList casts.map((e) ForecastData.fromJson(e)).toList();7. API集成实战案例7.1 完整的API客户端封装将网络请求封装成独立类class WeatherApiClient { static const String _baseUrl https://restapi.amap.com/v3/weather/weatherInfo; static const String _apiKey YOUR_API_KEY; static FutureWeatherData getCurrentWeather(String cityCode) async { final url Uri.parse($_baseUrl?key$_apiKeycity$cityCodeextensionsbase); try { final response await http.get(url).timeout(const Duration(seconds: 10)); if (response.statusCode ! 200) { throw Exception(HTTP错误: ${response.statusCode}); } final data jsonDecode(response.body); if (data[status] ! 1) { throw Exception(API错误: ${data[info]}); } return WeatherData.fromJson(data[lives][0]); } catch (e) { throw Exception(获取天气失败: $e); } } static FutureListForecastData getForecast(String cityCode) async { final url Uri.parse($_baseUrl?key$_apiKeycity$cityCodeextensionsall); try { final response await http.get(url).timeout(const Duration(seconds: 10)); if (response.statusCode ! 200) { throw Exception(HTTP错误: ${response.statusCode}); } final data jsonDecode(response.body); if (data[status] ! 1) { throw Exception(API错误: ${data[info]}); } final casts data[forecasts][0][casts] as List; return casts.map((e) ForecastData.fromJson(e)).toList(); } catch (e) { throw Exception(获取预报失败: $e); } } }7.2 在State中使用APIclass _WeatherPageState extends StateWeatherPage { WeatherData? _currentWeather; ListForecastData? _forecast; bool _isLoading false; String? _error; Futurevoid _fetchWeather() async { setState(() { _isLoading true; _error null; }); try { final results await Future.wait([ WeatherApiClient.getCurrentWeather(_cityCode), WeatherApiClient.getForecast(_cityCode), ]); setState(() { _currentWeather results[0] as WeatherData; _forecast results[1] as ListForecastData; _isLoading false; }); } catch (e) { setState(() { _error e.toString(); _isLoading false; }); } } override Widget build(BuildContext context) { if (_isLoading) return _buildLoading(); if (_error ! null) return _buildError(); if (_currentWeather null) return _buildEmpty(); return _buildWeatherContent(); } }7.3 加载状态管理完善的UI状态处理Widget _buildBody() { if (_isLoading) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator(), SizedBox(height: 16), Text(加载中...), ], ), ); } if (_error ! null) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.error, color: Colors.red), SizedBox(height: 16), Text(_error!), SizedBox(height: 16), ElevatedButton( onPressed: _fetchWeather, child: Text(重试), ), ], ), ); } return ListView( children: [ _buildCurrentWeather(), _buildForecastList(), ], ); }8. 性能优化与缓存策略8.1 内存缓存实现class WeatherCache { static final MapString, CachedWeather _cache {}; static WeatherData? get(String city) { final cached _cache[city]; if (cached null) return null; // 缓存10分钟有效 if (DateTime.now().difference(cached.timestamp).inMinutes 10) { return cached.data; } _cache.remove(city); return null; } static void set(String city, WeatherData data) { _cache[city] CachedWeather( data: data, timestamp: DateTime.now(), ); } } class CachedWeather { final WeatherData data; final DateTime timestamp; CachedWeather({required this.data, required this.timestamp}); }8.2 使用缓存优化体验Futurevoid _fetchWeather() async { // 先检查缓存 final cached WeatherCache.get(_cityCode); if (cached ! null) { setState(() _currentWeather cached); return; } // 无缓存或过期请求网络 setState(() _isLoading true); try { final weather await WeatherApiClient.getCurrentWeather(_cityCode); WeatherCache.set(_cityCode, weather); setState(() _currentWeather weather); } catch (e) { setState(() _error e.toString()); } finally { setState(() _isLoading false); } }8.3 请求去重策略防止重复请求class _WeatherPageState extends StateWeatherPage { String? _pendingRequestCity; Futurevoid _fetchWeather() async { final city _cityCode; // 如果已有相同请求在进行则忽略 if (_pendingRequestCity city) return; _pendingRequestCity city; try { final weather await WeatherApiClient.getCurrentWeather(city); // 确保UI仍然需要这个结果 if (mounted _cityCode city) { setState(() _currentWeather weather); } } finally { if (mounted _cityCode city) { _pendingRequestCity null; } } } }9. 高级技巧与注意事项9.1 使用拦截器统一处理请求创建自定义Client实现通用逻辑class AppHttpClient extends http.BaseClient { final http.Client _inner http.Client(); override Futurehttp.StreamedResponse send(http.BaseRequest request) async { // 添加统一header request.headers[User-Agent] WeatherApp/1.0; // 记录请求日志 debugPrint(${request.method} ${request.url}); final response await _inner.send(request); // 统一错误处理 if (response.statusCode 400) { throw HttpException(请求失败: ${response.statusCode}); } return response; } } // 使用自定义Client final client AppHttpClient(); final response await client.get(url);9.2 使用Dio替代http包对于复杂需求可以考虑使用Diodependencies: dio: ^5.0.0Dio的优势拦截器支持全局配置文件上传下载请求取消基础用法final dio Dio(); final response await dio.get(https://api.example.com/data);9.3 单元测试策略测试网络请求的关键点使用mockito模拟网络请求测试各种响应情况成功、失败、超时验证模型类解析逻辑示例测试class MockClient extends Mock implements http.Client {} void main() { test(测试天气API解析, () async { final client MockClient(); // 模拟成功响应 when(client.get(any)).thenAnswer((_) async http.Response( {status:1,lives:[{city:北京,temperature:20}]}, 200, )); final weather await WeatherApiClient.getCurrentWeather(110000, client: client); expect(weather.city, equals(北京)); expect(weather.temperature, equals(20)); }); }9.4 常见问题排查证书问题确保Android和iOS配置了正确的网络权限乱码问题检查响应头的Content-Type和实际编码是否一致解析错误使用try-catch包裹jsonDecode调用跨域问题开发时可能需要配置代理10. 项目结构建议合理的项目结构可以提高代码可维护性lib/ |- models/ |- weather_data.dart |- forecast_data.dart |- services/ |- weather_api.dart |- cache_service.dart |- widgets/ |- weather_card.dart |- forecast_list.dart |- pages/ |- weather_page.dart关键原则分离数据层和UI层将网络请求封装为独立服务使用小部件组合构建UI11. 实际项目经验分享在真实项目中我总结了以下经验教训密钥管理不要将API密钥硬编码在代码中使用环境变量或加密存储错误处理为用户提供有意义的错误信息而不是原始异常本地化天气描述等数据应考虑本地化显示性能监控记录请求耗时识别性能瓶颈离线支持使用本地数据库如hive实现完整的离线体验一个典型的优化案例我们发现在弱网环境下连续的城市切换会导致多个请求堆积。通过实现请求去重和取消机制将用户体验提升了40%。12. 扩展学习建议想要深入掌握网络编程建议进一步学习高级Dart异步Stream、Isolate状态管理Provider、Riverpod与网络请求的结合持久化存储hive、shared_preferencesWebSocket实时通信场景gRPC高性能RPC框架网络请求看似简单但要构建真正健壮的应用需要考虑到各种边界情况和用户体验细节。希望本文的内容能帮助你在Flutter for OpenHarmony开发中构建出更稳定、高效的应用。