如何在每个视图模型的 Flutter 中正确组织我的 API 调用？

Question

我大约一个月前开始学习 Flutter，我阅读并观看了一些很好的教程，其中最好的是带有 Provider 和视图模型的响应式架构，以防止在创建应用程序时重复代码。

现在我正在为我的工作编写我的第一个应用程序，我有一些 API 电话要做。我还没有找到一篇好的文章或视频，但还没有教我如何将我的 API 请求正确地组织到单独的文件中以防止重复，所以我来这里寻求您的指导。

这是我的做法。我考虑创建一个 api.dart 服务来实现 http 包的方法。到目前为止它只有 get()，但我已经可以看出其他人最终会过多地重复该条件。

class Api {
  Future<dynamic> get(String url) async {
    final response = await http.get('$kBaseUrl/$url');

    if (response.statusCode != 200) {
      throw Exception(json.decode(response.body)[0]['mensagem']);
    }

    return json.decode(response.body);
  }
}

然后，在我目前唯一的视图模型中，例如，我在单击按钮时从 api.dart 实现 get()。按钮中的 model 就是我上面提到的 architecture 的完成方式。

Future<void> submit() async {
  print('Email: $email, password: $password');
  get();
}

Future get() async {
  _setBusy(true); // loading status on
  _setError(''); // clean errors

  try {
    await _api.get('clientes');
  } catch (e) {
    _setError(e.message);
  }

  _setBusy(false); // loading status off
}

PrimaryButton(
  onTap: () {
    model.submit();
  },
  disabled: model.busy, // the loading state to modify the styling of the button
),

就是这样。我觉得它可能会好得多，我更愿意从一开始就采用最好的方式，这样我就可以了解更多关于构建文件的信息，并随着应用程序的发展保持文件的清洁。我将感谢任何指导、代码、文章、视频 and/or 存储库。

Answer 1

好问题，@gamofe。

就文件结构而言，Flutter 仍然有点像狂野的西部。话虽这么说，在我的项目和我读过的大部分教程中，文件夹结构如下所示：

lib/src
lib/src/repositories
lib/src/repositories/common
lib/src/repositories/user
lib/src/repositories/user/user_repository.dart
lib/src/repositories/item/item_repository.dart
lib/src/blocs
lib/src/blocs/user
lib/src/blocs/user/barrel.dart
lib/src/blocs/user/user_state.dart
lib/src/blocs/user/user_events.dart
lib/src/blocs/user/user_bloc.dart
lib/src/models/user.dart
lib/src/screens/login_screen.dart
lib/src/screens/item_feed.dart
lib/src/widgets

此外，我要说的是，您应该直接从视图层进行 API 调用的情况极为罕见。我建议阅读 BLoC 模式。这是在 Flutter 应用程序中管理状态的普遍接受（并被 Google 推荐）的方法。

基本上，BLoC 就是一个流。在您看来，您从流中监听新的状态事件。如果你想更新数据，你 "dispatch" 一个新的事件到流，最终转化为状态输出。

在您的应用程序中实施 Bloc 模式将帮助您实现您正在寻找的分离和 DRY 代码。

Flutter Bloc 是一个帮助程序库，可以帮助您运行 Bloc 模式。文档很好，例子也很多。有一些文档概述了如何很好地管理视图、状态和网络请求之间的关系。

FWIW，I've put together an example Flutter application 实现了所有这些概念。我为每个新项目使用复制它来帮助我快速摇摆和滚动。随意四处闲逛。我已尽最大努力遵循最佳实践，因此希望它能成为一个不错的模型。

如何在每个视图模型的 Flutter 中正确组织我的 API 调用？

How can I properly organize my API calls in Flutter per view models?

flutter

dart

architecture

directory-structure