如何在颤振中有效地使用提供者获取初始数据

Question

最近，我做了一个颤振课程。 讲师使来自 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 中我们不能使用异步等待，所以很可能是回调地狱等待。 此外，还需要初始化一个变量，以便在加载时调用一次 api。

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

Answer 1

这是 Academind 课程吗？

这也是正确的方法。

要使用 Provider，您需要上下文。

编辑：在答案中添加了 BaselAbuhadrous 的评论。

你需要使用didChangeDependencies，因为initState实际上提供了上下文，但是屏幕布局还没有构建，所以你会得到一个错误，但是如果你使用WidgetsBindings.instance并调用它里面的提供者，那么您将不会收到错误消息。

Answer 2

  //your model , product_model.dart
  import 'dart:convert';

   List<Product> availableTicketsFromJson(String str) => List<Product>.from(json.decode(str).map((x) => Product.fromJson(x)));

  class Product {
  String title;
  String description;
  String imageUrl;
  double price;
  bool isFavorite;

  Product(
      {this.title,
      this.description,
      this.imageUrl,
      this.price,
      this.isFavorite});

  factory Product.fromJson(Map<String, dynamic> json) => Product(
        title: json['title'] as String,
        description: json['description'] as String,
        imageUrl: json['imageUrl'] as String,
        price: json['price'] as double,
        isFavorite: json['isFavorite'] as bool,
      );
}



 //viewmodel class
 final String url = "test.com";
 Future<List<Product> fetchProducts() async {
 List<Product> products = List<Product>();
 try {
       final request = await http.get(url);
       if(request.statusCode == 200) {
            products = productsFromJson(request.body.toString());
            notifyListeners();
         } else {
            print(request.statusCode.toString());
         }
    } catch(e) {
      return List<Product>();
    }
    return products;
 } 
 

 //fetch_data.dart
 Create your instance of provider in the page that you wanna fetch the data:
 Under State<yourWidget>

 => FetchDataViewModel _model;
    List<Product> products = [];
 under build method
 => _model = Provider.of<FetchDataViewModel>(context,listen: false);

    Make a http request with FutureBuilder
    FutureBuilder(future:_model.fetchProducts()),
    builder: (context,snapshot)){
       if(snapshot.connectionState == ConnectionState.done) {
       products = snapshot.data;
       if(products.length > 0) {
           return ListView.builder(
              itemCount: products.length,
              itemBuilder : (context,index) {
               return _items();
           }
         );
      } else {return _noSavedDataWidget();}
     }
    }

    You can test such a code

Answer 3

有时

Provider.of(context, listen : false).'providerFunction'

可能会有帮助。

Answer 4

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

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

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

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

---

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