Flutter数据获取插件simple_fetch的使用

Flutter数据获取插件simple_fetch的使用

simple_fetch 是一个基于 Dio 的封装。它简化了在 Dart/Flutter 中处理模型和 HTTP 请求的复杂性。

开始使用

安装

在 pubspec.yaml 文件中添加 simple_fetch 包。

import 'package:simple_fetch/simple_fetch.dart';

final simpleFetch = SimpleFetch();
String apiUrl = 'https://jsonplaceholder.typicode.com/todos/';

非常简单的使用

testGet() async {
  List<Todo?> allProductsData = await simpleFetch.getList<Todo>(
    url: apiUrl,
    mapper: (json) => Todo?.fromJson(json),
  );
}

示例

执行 GET 请求

获取单个对象并将其转换为模型类型

/// 从端点获取单个数据项
void getOneDataItemFromEndpoint() async {
  SimpleFetch simpleFetch = SimpleFetch();

  String apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  try {
    Todo? productsData = await simpleFetch.get<Todo>(
      url: apiUrl,
      mapper: (json) => Todo?.fromJson(json),
      // transformer: (transform) => transform['data'],
    );
    print(productsData?.toJson());
  } on SimpleError catch (exception) {
    print(exception.message);
  } catch (e) {}
}

获取列表对象并将其转换为模型类型

/// 从端点获取数据列表
void getDataFromEndpoint() async {
  SimpleFetch simpleFetch = SimpleFetch();

  String apiUrl = 'https://jsonplaceholder.typicode.com/todos/';

  try {
    List<Todo?> allProductsData = await simpleFetch.getList<Todo>(
      url: apiUrl,
      mapper: (json) => Todo?.fromJson(json),
    );

    print(allProductsData.map((e) => e?.toJson()).toList());
  } on SimpleError catch (exception) {
    print(exception.message);
  } catch (e) {}
}

执行 POST 请求

如果您的 POST 请求响应是一个单一项目

/// 如果POST请求的响应是一个单独的项目
void postSingleResponse() async {
  SimpleFetch simpleFetch = SimpleFetch();

  String apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  try {
    Todo? productsData = await simpleFetch.post<Todo>(
      url: apiUrl,
      data: {'id': 1, 'name': 'hello'},
      mapper: (json) => Todo?.fromJson(json),
      // transformer: (transform) => transform['data'],
    );
    print(productsData?.toJson());
  } on SimpleError catch (exception) {
    print(exception.message);
  } catch (e) {}
}

如果您的 POST 请求响应是一个项目列表

/// 如果POST请求的响应是一个项目列表
void postMultipleResponse() async {
  SimpleFetch simpleFetch = SimpleFetch();

  String apiUrl = 'https://jsonplaceholder.typicode.com/todos/';

  try {
    List<Todo?> allProductsData = await simpleFetch.postList<Todo>(
      url: apiUrl,
      data: {'id': 2, 'name': 'Hiiii'},
      mapper: (json) => Todo?.fromJson(json),
    );

    print(allProductsData.map((e) => e?.toJson()).toList());
  } on SimpleError catch (exception) {
    print(exception.message);
  } catch (e) {}
}

并发执行多个请求

response = await Future.wait([request1, request2]);

转换器

默认情况下，包设计用于简单地检索列表或 JSON 数据。有时你可能希望在将数据转换为对象之前对其进行修改（如删除、添加或过滤）。transformer 参数可以帮助你实现这一点。

例如：

try {
  List<Todo?> allProductsData = await simpleFetch.getList<Todo>(
    url: apiUrl,
    mapper: (json) => Todo?.fromJson(json),
    transformer: (transform) => transform['data'],
  );

  print(allProductsData.map((e) => e?.toJson()).toList());
} on SimpleError catch (exception) {
  print(exception.message);
} catch (e) {}

示例代码

以下是在 main.dart 文件中的完整示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:example/models/todo_model.dart';
import 'package:simple_fetch/simple_fetch.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const SimpleFetchTestApp();
  }
}

class SimpleFetchTestApp extends StatefulWidget {
  const SimpleFetchTestApp({super.key});

  [@override](/user/override)
  State<SimpleFetchTestApp> createState() => _SimpleFetchTestAppState();
}

class _SimpleFetchTestAppState extends State<SimpleFetchTestApp> {

  void getDataFromEndpoint() async {
    SimpleFetch simpleFetch = SimpleFetch();

    String apiUrl = 'https://jsonplaceholder.typicode.com/todos/';

    try {
      List<Todo?> allProductsData = await simpleFetch.getList<Todo>(
        url: apiUrl,
        mapper: (json) => Todo?.fromJson(json),
      );

      print(allProductsData.map((e) => e?.toJson()).toList());
    } on SimpleError catch (exception) {
      print(exception.message);
    } catch (e) {}
  }

  void getOneDataItemFromEndpoint() async {
    SimpleFetch simpleFetch = SimpleFetch();

    String apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

    try {
      Todo? productsData = await simpleFetch.get<Todo>(
        url: apiUrl,
        mapper: (json) => Todo?.fromJson(json),
        // transformer: (transform) => transform['data'],
      );
      print(productsData?.toJson());
    } on SimpleError catch (exception) {
      print(exception.message);
    } catch (e) {}
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          const SizedBox(
            height: 120,
          ),
          Column(
            children: [
              CupertinoButton(
                  color: Theme.of(context).primaryColor,
                  child: const Text("Fetch All..."),
                  onPressed: () {
                    getDataFromEndpoint();
                  }),
              const SizedBox(
                height: 60,
              ),
              CupertinoButton(
                  color: Theme.of(context).primaryColor,
                  child: const Text("Single Fetch..."),
                  onPressed: () {
                    getOneDataItemFromEndpoint();
                  }),
            ],
          )
        ],
      ),
    );
  }
}