Flutter网络功能增强插件red_clan_network的使用

简介

red_clan_network 是一个用于简化API请求的Dart包，它抽象了常见的HTTP方法（如GET、POST、PUT、PATCH和DELETE），并提供了一种灵活且可定制的方式来处理不同类型的HTTP请求，并将响应解析为Dart模型。

功能特点

• API类型：只需提供API类型（GET、POST、PATCH、PUT、DELETE）。
• 灵活的数据处理：如果需要返回数据，可以提供模型或函数将自动返回 response.statusCode 和 response.body。
• 简化代码：以最简单的方式获取自动映射的模型，形式为 success 或 failure。

警告

red_clan_network 目前不支持Socket API，该功能正在开发中。您可以参与贡献。

完整示例Demo

1. 创建模型

首先，定义一个模型类来表示从API获取的数据。例如，我们创建一个 TodoModel 来表示待办事项：

class TodoModel {
  int? userId;
  int? id;
  String? title;
  bool? completed;

  // 构造函数
  TodoModel({this.userId, this.id, this.title, this.completed});

  // 从JSON数据创建TodoModel
  TodoModel.fromJson(Map<String, dynamic> json) {
    userId = json['userId'];
    id = json['id'];
    title = json['title'];
    completed = json['completed'];
  }

  // 将TodoModel转换为JSON格式
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['userId'] = userId;
    data['id'] = id;
    data['title'] = title;
    data['completed'] = completed;
    return data;
  }
}

2. 初始化API服务

在应用中创建 ApiService 实例，以便后续调用API：

final ApiService apiService = ApiService();

3. GET请求示例

以下是一个GET请求的示例，用于从API获取数据并显示在界面上：

Future<void> fetchData<T>(T Function(dynamic) modelFromJson) async {
  var response = await apiService.request<T>(
    url: 'https://jsonplaceholder.typicode.com/todos',
    method: 'GET',
    modelFromJson: modelFromJson,
    successStatusCodes: [200, 201],
  );

  setState(() {
    if (response.isSuccess) {
      message = 'Data Fetched Successfully';
      dataList = response.response as List<T>;
      statusCode = response.code;
    } else {
      message = 'Something went wrong with ${response.code}';
      statusCode = response.code;
    }
  });
}

4. POST请求示例

以下是一个POST请求的示例，用于向API发送数据：

Future<void> postData<T>(T Function(dynamic) modelFromJson) async {
  var bodyData = {
    "title": 'foo',
    "body": 'bar',
    "userId": 1,
  };
  var response = await apiService.request<T>(
    url: 'https://jsonplaceholder.typicode.com/posts',
    method: 'POST',
    successStatusCodes: [200, 201],
    headers: {
      'Content-Type': 'application/json',
    },
    body: bodyData,
    modelFromJson: modelFromJson,
  );

  setState(() {
    if (response.isSuccess) {
      message = 'Data Post Success';
      statusCode = response.code;
    } else {
      message = 'Something went wrong with ${response.code}';
      statusCode = response.code;
    }
  });
}

5. PUT请求示例

以下是一个PUT请求的示例，用于更新API中的数据：

Future<void> putData<T>(T Function(dynamic) modelFromJson) async {
  var bodyData = {
    "id": 1,
    "title": 'foo',
    "body": 'bar',
    "userId": 1,
  };
  var response = await apiService.request<T>(
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'PUT',
    successStatusCodes: [200, 201],
    headers: {'Authorization': ' ', 'Content-Type': 'application/json'},
    body: bodyData,
    modelFromJson: modelFromJson,
  );

  setState(() {
    dataList = [];
    if (response.isSuccess) {
      message = 'Data Put Success';
      statusCode = response.code;
    } else {
      message = 'Something went wrong with ${response.code}';
      statusCode = response.code;
    }
  });
}

6. DELETE请求示例

以下是一个DELETE请求的示例，用于从API中删除数据：

Future<void> deleteData<T>(T Function(dynamic) modelFromJson) async {
  var response = await apiService.request<T>(
    url: 'https://dummy.restapiexample.com/api/v1/delete/3',
    method: 'DELETE',
    successStatusCodes: [200, 201],
    headers: {'Content-Type': 'application/json', 'Authorization': ""},
    modelFromJson: modelFromJson,
  );

  setState(() {
    dataList = [];
    if (response.isSuccess) {
      message = 'Delete Success';
      statusCode = response.code;
    } else {
      message = 'Something went wrong with ${response.code}';
      statusCode = response.code;
    }
  });
}

7. PATCH请求示例

以下是一个PATCH请求的示例，用于部分更新API中的数据：

Future<void> patchData<T>(T Function(dynamic) modelFromJson) async {
  var bodyData = {
    "title": 'foo',
  };
  var response = await apiService.request<T>(
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'PATCH',
    successStatusCodes: [200, 201],
    headers: {'Authorization': ' ', 'Content-Type': 'application/json'},
    body: bodyData,
    modelFromJson: modelFromJson,
  );

  setState(() {
    dataList = [];
    if (response.isSuccess) {
      statusCode = response.code;
      message = 'Patch Success';
    } else {
      statusCode = response.code;
      message = 'Something went wrong with ${response.code}';
    }
  });
}

8. 上传文件示例

以下是一个上传文件的示例，用于向API发送文件：

Future<void> postDataWithFile() async {
  var request = http.MultipartRequest(
    'POST',
    Uri.parse('https://your_file_upload_api_link'),
  );

  request.headers.addAll({
    'Content-Type': 'multipart/form-data',
    'Authorization': 'Bearer your_token_here',
  });

  request.fields['description'] = 'File upload example';

  var file = await http.MultipartFile.fromPath('file', 'path_to_your_file');
  request.files.add(file);

  var response = await request.send();
  final responseBody = await response.stream.bytesToString();

  setState(() {
    if (response.statusCode == 200 || response.statusCode == 201) {
      message = 'File Upload Success';
      statusCode = response.statusCode;
    } else {
      statusCode = response.statusCode;
      message = 'Something went wrong with ${response.statusCode}';
    }
  });
}

9. 主界面布局

最后，我们将所有按钮和结果显示在一个简单的Flutter界面上：

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

class _MyHomePageState extends State<MyHomePage> {
  final ApiService apiService = ApiService();
  List<dynamic> dataList = [];
  String message = 'Press any button above';
  var statusCode = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('API Example'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () async {
                await postData((json) => TodoModel.fromJson(json));
              },
              child: Text("Post Data"),
            ),
            ElevatedButton(
              onPressed: () async {
                await deleteData((json) => TodoModel.fromJson(json));
              },
              child: Text("Delete"),
            ),
            ElevatedButton(
              onPressed: () async {
                await putData((json) => TodoModel.fromJson(json));
              },
              child: Text("Put Data"),
            ),
            ElevatedButton(
              onPressed: () async {
                await patchData((json) => TodoModel.fromJson(json));
              },
              child: Text("Patch Data"),
            ),
            ElevatedButton(
              onPressed: () async {
                await fetchData((json) => TodoModel.fromJson(json));
              },
              child: Text("Fetch Data"),
            ),
            ElevatedButton(
              onPressed: () async {
                await postDataWithFile();
              },
              child: Text("Post Data with File"),
            ),
            Divider(),
            Text("${message}\nstatus code: ${statusCode}"),
            Divider(),
            ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemCount: dataList.length,
              itemBuilder: (context, index) {
                var item = dataList[index] as TodoModel;
                return ListTile(
                  title: Text(item.title ?? ""),
                  subtitle: item.completed != null && item.completed!
                      ? Text("Completed")
                      : Text("Pending"),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}