Flutter网络请求注解插件dio_annotation的使用

Flutter网络请求注解插件dio_annotation的使用

Dio Annotation

dio_annotation 是一个用于简化 Flutter 中网络请求的插件。它通过注解的方式简化了 API 请求的编写过程，使得代码更加简洁和易读。

安装

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  dio_annotation: ^x.y.z

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

基本用法

1. 定义数据模型

假设我们要定义一个用户数据模型：

import 'package:dio_annotation/dio_annotation.dart';

part 'user.g.dart'; // 这个文件由生成器自动生成

@Model()
class User {
  @Field()
  final String name;

  @Field()
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

2. 创建API接口

接下来我们创建一个API接口类来处理用户的请求：

import 'package:dio_annotation/dio_annotation.dart';
import 'user.dart';

@DioApi(
  baseUrl: "https://jsonplaceholder.typicode.com",
)
abstract class UserApi {
  @Get(path: "/users/{id}")
  Future<User> getUser(@Path("id") int id);

  @Post(path: "/users")
  Future<User> createUser(@Body() User user);
}

3. 初始化Dio实例

在应用启动时初始化 Dio 实例，并注入 DioApiInterceptor：

import 'package:dio_annotation/dio_annotation.dart';
import 'package:dio/dio.dart';

void main() async {
  // 初始化Dio实例
  final dio = Dio();

  // 注入DioApiInterceptor
  dio.interceptors.add(DioApiInterceptor(UserApi()));

  runApp(MyApp(dio: dio));
}

4. 使用API接口

最后，我们可以使用定义好的 API 接口来发起请求：

import 'package:flutter/material.dart';
import 'package:dio_annotation/dio_annotation.dart';
import 'user.dart';

class MyApp extends StatelessWidget {
  final Dio dio;

  MyApp({required this.dio});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dio Annotation Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 使用UserApi来获取用户信息
              final userApi = DioApi.get<UserApi>(dio);
              final user = await userApi.getUser(1);
              print(user.toJson());
            },
            child: Text('Get User'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


dio_annotation 是一个为 Flutter 项目中的网络请求提供注解支持的插件，它通常与 dio 库一起使用，以简化网络请求的配置和管理。dio_annotation 通过注解的方式生成代码，减少了手动编写网络请求代码的工作量。

以下是如何在 Flutter 项目中使用 dio_annotation 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 dio_annotation 和 dio 的依赖：

dependencies:
  dio: ^4.0.0
  dio_annotation: ^4.0.0

dev_dependencies:
  build_runner: ^2.0.0
  dio_generator: ^4.0.0

2. 创建网络请求接口

接下来，创建一个接口并使用 dio_annotation 提供的注解来定义网络请求方法。例如：

import 'package:dio_annotation/dio_annotation.dart';

part 'api_service.g.dart'; // 生成的文件

@DioService()
abstract class ApiService {
  @GET('/posts')
  Future<List<Post>> getPosts();

  @GET('/posts/{id}')
  Future<Post> getPostById(@Path('id') int id);

  @POST('/posts')
  Future<Post> createPost(@Body() Post post);

  @PUT('/posts/{id}')
  Future<Post> updatePost(@Path('id') int id, @Body() Post post);

  @DELETE('/posts/{id}')
  Future<void> deletePost(@Path('id') int id);
}

3. 生成代码

使用 build_runner 生成代码。在终端中运行以下命令：

flutter pub run build_runner build

这将生成 api_service.g.dart 文件，其中包含实现网络请求的具体代码。

4. 使用生成的代码

在需要使用网络请求的地方，可以通过 Dio 实例来创建 ApiService 的实例：

import 'package:dio/dio.dart';
import 'api_service.dart';

void main() async {
  final dio = Dio();
  final apiService = ApiService.create(dio);

  try {
    final posts = await apiService.getPosts();
    print(posts);
  } catch (e) {
    print(e);
  }
}

5. 配置 Dio

你可以根据需要配置 Dio 实例，例如设置基 URL、拦截器等：

final dio = Dio(BaseOptions(
  baseUrl: 'https://jsonplaceholder.typicode.com',
  connectTimeout: 5000,
  receiveTimeout: 5000,
));

// 添加拦截器
dio.interceptors.add(LogInterceptor(responseBody: true));

6. 处理模型

在上面的例子中，Post 是一个数据模型类。你需要根据 API 返回的数据结构定义相应的模型类，并使用 json_serializable 或其他工具来处理 JSON 序列化。

例如：

import 'package:json_annotation/json_annotation.dart';

part 'post.g.dart';

@JsonSerializable()
class Post {
  int id;
  String title;
  String body;

  Post({required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) => _$PostFromJson(json);
  Map<String, dynamic> toJson() => _$PostToJson(this);
}

7. 生成模型代码

同样，使用 build_runner 生成模型类的代码：

flutter pub run build_runner build
回到顶部