Flutter网络请求插件http_repository的使用

Flutter网络请求插件http_repository的使用

本项目是一个新的 Flutter 插件包,用于处理 HTTP 网络请求。它包含 Android 和/或 iOS 平台特定的实现代码。

开始使用

要开始使用此插件,您可以参考以下示例代码来了解如何在 Flutter 应用程序中使用 http_repository

示例代码

以下是 main.dart 文件的示例代码:

import 'package:flutter/material.dart';
// 引入 http 包
import 'package:http/http.dart' as http;
// 引入 json 解码库
import 'dart:convert';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义一个变量来存储从网络请求获取的数据
  String _networkData = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    // 在初始化状态时调用网络请求方法
    fetchNetworkData();
  }

  // 定义一个方法来执行网络请求
  Future<void> fetchNetworkData() async {
    try {
      // 使用 http.get 方法发起 GET 请求
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));

      if (response.statusCode == 200) {
        // 如果服务器返回成功响应(200),则解析 JSON 数据
        setState(() {
          _networkData = jsonDecode(response.body)['title'];
        });
      } else {
        // 如果服务器返回错误,则抛出异常
        throw Exception('Failed to load data from network');
      }
    } catch (e) {
      // 捕获并打印错误信息
      print(e);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HTTP 请求示例'),
        ),
        body: Center(
          child: Text('获取到的数据: $_networkData\n'),
        ),
      ),
    );
  }
}

代码解释

  1. 引入依赖

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

    这里我们引入了 http 包来处理网络请求,并引入了 dart:convert 包来处理 JSON 数据的解析。

  2. 定义主函数

    void main() {
      runApp(MyApp());
    }
    
  3. 创建应用程序类

    class MyApp extends StatefulWidget {
      [@override](/user/override)
      _MyAppState createState() => _MyAppState();
    }
    
  4. 初始化状态

    class _MyAppState extends State<MyApp> {
      String _networkData = 'Unknown';
    
      [@override](/user/override)
      void initState() {
        super.initState();
        fetchNetworkData();
      }
    
  5. 定义网络请求方法

    Future<void> fetchNetworkData() async {
      try {
        final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
    
        if (response.statusCode == 200) {
          setState(() {
            _networkData = jsonDecode(response.body)['title'];
          });
        } else {
          throw Exception('Failed to load data from network');
        }
      } catch (e) {
        print(e);
      }
    }
    
  6. 构建应用界面

    [@override](/user/override)
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('HTTP 请求示例'),
          ),
          body: Center(
            child: Text('获取到的数据: $_networkData\n'),
          ),
        ),
      );
    }
    

更多关于Flutter网络请求插件http_repository的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络请求插件http_repository的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


http_repository 是一个基于 dio 的 Flutter 网络请求插件,它提供了一种简洁的方式来处理网络请求。以下是如何使用 http_repository 插件进行网络请求的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 http_repository 依赖:

dependencies:
  flutter:
    sdk: flutter
  http_repository: ^0.0.1  # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建 Repository 类

接下来,创建一个继承自 HttpRepository 的 Repository 类。这个类将用于定义具体的网络请求方法。

import 'package:http_repository/http_repository.dart';

class MyRepository extends HttpRepository {
  MyRepository() : super(baseUrl: 'https://jsonplaceholder.typicode.com');

  // 示例:获取用户列表
  Future<List<dynamic>> getUsers() async {
    return await get('/users');
  }

  // 示例:根据用户ID获取用户信息
  Future<dynamic> getUserById(int id) async {
    return await get('/users/$id');
  }

  // 示例:创建新用户
  Future<dynamic> createUser(Map<String, dynamic> userData) async {
    return await post('/users', data: userData);
  }

  // 示例:更新用户信息
  Future<dynamic> updateUser(int id, Map<String, dynamic> userData) async {
    return await put('/users/$id', data: userData);
  }

  // 示例:删除用户
  Future<dynamic> deleteUser(int id) async {
    return await delete('/users/$id');
  }
}

3. 使用 Repository 类

在你的 Flutter 应用中,你可以通过创建 MyRepository 的实例来发起网络请求。

import 'package:flutter/material.dart';
import 'my_repository.dart'; // 导入你创建的 Repository 类

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final MyRepository _repository = MyRepository();

  List<dynamic> _users = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _fetchUsers();
  }

  Future<void> _fetchUsers() async {
    try {
      final users = await _repository.getUsers();
      setState(() {
        _users = users;
      });
    } catch (e) {
      print('Error fetching users: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Users'),
      ),
      body: ListView.builder(
        itemCount: _users.length,
        itemBuilder: (context, index) {
          final user = _users[index];
          return ListTile(
            title: Text(user['name']),
            subtitle: Text(user['email']),
          );
        },
      ),
    );
  }
}

4. 处理请求参数和响应

http_repository 提供了 get, post, put, delete 等方法来发送不同类型的请求。你可以通过 data 参数传递请求体,通过 queryParameters 传递查询参数。

// 示例:带查询参数的 GET 请求
Future<dynamic> getPostsByUserId(int userId) async {
  return await get('/posts', queryParameters: {'userId': userId});
}

5. 错误处理

http_repository 会自动处理网络请求中的错误,并通过 try-catch 块捕获异常。你可以在 catch 块中处理错误,例如显示错误消息或记录日志。

Future<void> _fetchUsers() async {
  try {
    final users = await _repository.getUsers();
    setState(() {
      _users = users;
    });
  } catch (e) {
    print('Error fetching users: $e');
    // 在这里显示错误消息或记录日志
  }
}

6. 配置 Dio 实例

如果你需要自定义 Dio 实例的配置,可以通过重写 HttpRepositorycreateDio 方法来实现。

[@override](/user/override)
Dio createDio() {
  final dio = super.createDio();
  dio.options.connectTimeout = 5000; // 设置连接超时时间
  dio.options.receiveTimeout = 3000; // 设置接收数据超时时间
  return dio;
}
回到顶部