api - 如何在 flutter 中有效地使用 provider 获取初始数据

Question

最近做了一个flutter类(class)。讲师使来自 API 的获取请求变得如此困难。对于像 flutter 这样的混合框架，我从来没有想过它如此困难。

下面是我的代码。我正在使用 provider 进行状态管理。

Future<void> fetchAndSetProducts() async {
    try {
      const url = 'fetch-url';
      final response = await http.get(url);
      final data = json.decode(response.body) as Map<String, dynamic>;
      final List<Product> loadedProducts = [];
      data.forEach((key, value) {
        loadedProducts.add(Product(
          id: key,
          title: value['title'],
          description: value['description'],
          imageUrl: value['imageUrl'],
          price: value['price'],
          isFavorite: value['isFavorite'],
        ));
      });

      _items = loadedProducts;
      notifyListeners();
    } catch (error) {
      throw (error);
    }
  }

在产品概览屏幕中，我正在显示产品页面，此方法如下所示:

bool _isInit = true;
  bool _isLoading = false;

  @override
  void didChangeDependencies() {
    if (_isInit) {
      setState(() {
        _isLoading = true;
      });
      Provider.of<Products>(context).fetchAndSetProducts().then((_) => {
            setState(() {
              _isLoading = false;
            })
          });
    }
    _isInit = false;
    super.didChangeDependencies();
  }

另一种方法包括使用零持续时间的偷偷摸摸的方式，就像我们在 javascript set timeout 中使用的那样给出零时间。

值得注意的是，在 didChangeDependencies 中，我们无法使用异步等待，因此很可能是回调 hell 等待。还需要初始化一个变量，以便在加载时调用一次 api。

没有简单的解决方案吗？还是一种行业处理方式？

Answer 1

here is a minimal working example of what you can do ，这不是世界上最好的东西，但这对我有用，如果你能做得更好，请告诉我。

你的问题的答案很简单，但是，你需要先重新安排一些东西。

Flutter 应用程序可以分为多个层(仅作为示例)数据、状态管理和 UI，在数据层中，您将拥有与 API 通信的所有方法，并在状态管理解决方案中调用它们(在你的情况下是提供者)，结果可以从提供者访问，它将数据保存在一个变量中，然后 UI 将能够从提供者那里检索这些数据，我知道这似乎有点多余，但是这是我们这样做的一个原因，如果您将 API 调用放在提供程序本身内部，并且您的应用程序中的其他地方使用相同的端点，那么您将有重复的代码，至于提供程序，它是您的数据所在的地方存储在运行时中，这些数据构成了应用程序的状态，最后，UI 可以轻松处理来自提供程序的显示数据，只需在提供程序中创建一个 bool 值，指示 API 调用是否正在执行/加载，和消费者内部的 UI 显示不同t 基于 bool 值的小部件。

如果我们要可视化操作流程，它会是这样的:
1- 来自 UI 的操作触发来自提供者的方法。
2- 在提供程序方法中，您将指示 API 调用正在执行的 bool 值设置为 true 并调用 notifyListeners()。
3- 调用 API 请求并对其调用 .then()。
4- 在 .then() 中将 bool 值设置为 false 以通知调用已结束并将接收到的数据设置为提供程序中的变量并再次调用 notifyListeners。
5- 在 UI 中，您应该让消费者监听您的提供者并处理 bool 值，如果它是 true，则显示一个 CircularProgressIndicator，如果它是 false，则显示您想要的小部件

---

关于 initState 中的上下文，您可以通过 3 种方式解决此问题:
1- 使用 WidgetsBinding.instance.addPostFrameCallback((_) => yourProviderFunction(context));
2- 通过在服务定位器中注册您的提供者，这样您根本不必使用上下文。 (这是我在上面发布的示例项目中使用的)
3- 通过在提供者的构造函数中执行所需的函数，因此在其初始化时将调用 API 请求