Flutter基础API集成插件base_api的使用

Flutter基础API集成插件base_api的使用

基于dio 实现网络请求

拦截器

  • 内置log 拦截器，log打印日志
  • loading 拦截器，请求开始显示，响应后隐藏
  • 数据加密拦器，请求数据加密/解密

普通请求

  • 支持 get/post/put …
  • 模型解析：列表/普通模型解析
  • loading/toast 提示，loading 节流展示

列表请求

  • 支持以上功能
  • 自动分页 上/下拉加载
  • 自动处理空视图
  • 列表请求支持 keypath 模型解析
  • 控制器添加即将出现/消失的生命周期

完整示例demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用base_api插件。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:base_api/base_api.dart'; // 引入base_api插件

// 定义一个简单的模型类
class User {
  final String name;
  final int age;

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

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

void main() {
  runApp(
    GetMaterialApp(
      title: "Application",
      initialRoute: "/home",
      getPages: [
        GetPage(name: "/home", page: () => HomePage()),
      ],
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Base API Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 使用base_api发起GET请求
            var response = await BaseApi.get<User>('/users', keyPath: 'data');
            if (response.success) {
              print('User Name: ${response.data.name}, Age: ${response.data.age}');
            } else {
              print('Error: ${response.message}');
            }
          },
          child: Text("Fetch User Data"),
        ),
      ),
    );
  }
}

在这个示例中，我们首先引入了base_api插件，并定义了一个简单的User模型类。然后在main函数中初始化了GetMaterialApp并设置了初始路由。在HomePage页面中，我们通过点击按钮来发起一个GET请求，获取用户数据并打印到控制台。

希望这个示例能够帮助你更好地理解和使用base_api插件。


更多关于Flutter基础API集成插件base_api的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter基础API集成插件base_api的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，base_api 并不是一个官方或广泛使用的插件。通常，开发者会使用 http、dio 或其他网络请求库来处理API请求。如果你有一个自定义的 base_api 插件，或者你是指某种特定的网络请求封装，以下是一个基本的集成和使用示例。

假设 base_api 是一个自定义的网络请求封装，以下是如何在Flutter项目中使用它的步骤：

1. 添加依赖

首先，确保你已经在 pubspec.yaml 文件中添加了 base_api 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  base_api: ^1.0.0  # 请根据实际情况替换为正确的版本号

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

2. 初始化 BaseApi

在你的项目中，通常会在 main.dart 或某个初始化文件中初始化 BaseApi。

import 'package:base_api/base_api.dart';

void main() {
  BaseApi.initialize(
    baseUrl: 'https://api.example.com',
    headers: {
      'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
      'Content-Type': 'application/json',
    },
  );

  runApp(MyApp());
}

3. 使用 BaseApi 发起请求

在你的业务逻辑中，可以使用 BaseApi 发起GET、POST等请求。

import 'package:flutter/material.dart';
import 'package:base_api/base_api.dart';

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

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

class _HomeScreenState extends State<HomeScreen> {
  String _responseData = '';

  Future<void> _fetchData() async {
    try {
      var response = await BaseApi.get('/endpoint');
      setState(() {
        _responseData = response.body;
      });
    } catch (e) {
      setState(() {
        _responseData = 'Error: $e';
      });
    }
  }

  Future<void> _postData() async {
    try {
      var response = await BaseApi.post('/endpoint', body: {
        'key': 'value',
      });
      setState(() {
        _responseData = response.body;
      });
    } catch (e) {
      setState(() {
        _responseData = 'Error: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BaseApi Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _fetchData,
              child: Text('Fetch Data'),
            ),
            ElevatedButton(
              onPressed: _postData,
              child: Text('Post Data'),
            ),
            SizedBox(height: 20),
            Text('Response: $_responseData'),
          ],
        ),
      ),
    );
  }
}
回到顶部