如何在flutter中调用initState中的异步方法

Posted 2023-02-23

【中文标题】如何在flutter中调用initState中的异步方法

【英文标题】：How to call an async method in initState in flutter

【发布时间】：2020-07-15 19:22:44

【问题描述】：

我需要从端点获取一些信息。我有这个方法：

List<Widget> cardsList = List();
List<dynamic> cardsId = List();

addToList() async 
    var jsonData = await Provider.of<CardData>(context).cardsList;
    print(jsonData);
    for (var i = 0, len = jsonData.length; i < len; i++) 
      if (jsonData[i]['account_type'] == "1") 
        cardsList.add(
          BankCard(
            bankName: jsonData[i]['title'],
            colors: [Color(0xFFD00E00), Color(0xFFF44336)],
            cardNumber: jsonData[i]['number'],
            cardDesc: jsonData[i]['description'],
          ),
        );
        cardsId.add(jsonData[i]['id']);
      
    
  

还有一个作为提供者数据的类，称为 CardData：

import 'package:flutter/material.dart';

import '../cards/cards.dart';

class CardData extends ChangeNotifier 
  static Cards cards = Cards();

  Future<dynamic> cardsList = cards.getCards();

还有一个名为 Card 的类来发送请求并执行所有其他操作：

import 'dart:convert';

import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class Cards 
  String _accessToken;
  String _refreshToken;

  Future<dynamic> getCards() async 
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    _accessToken = sharedPreferences.getString("access");
    _refreshToken = sharedPreferences.getString("refresh");
    var jsonData;

    var response = await sendRequestToGetCards(
        url: "http://10.0.2.2:8000/accounts/list/", accessToken: _accessToken);
    if (response.statusCode == 200) 
      jsonData = json.decode(utf8.decode(response.bodyBytes));
      return jsonData;
     else if (response.statusCode == 401) 
      _accessToken = await getNewAccessToken(_refreshToken);
      response = await sendRequestToGetCards(
          url: "http://10.0.2.2:8000/accounts/list/",
          accessToken: _accessToken);
      if (response.statusCode == 200) 
        jsonData = json.decode(utf8.decode(response.bodyBytes));
        return jsonData;
      
    
  

  getNewAccessToken(String refreshToken) async 
    var refreshResponse = await http.post(
        "http://10.0.2.2:8000/users/api/token/refresh/",
        body: 'refresh': refreshToken);
    if (refreshResponse.statusCode == 200) 
      var jsonData = json.decode(refreshResponse.body);
      return jsonData['access'];
    
  

  sendRequestToGetCards(String url, String accessToken) async 
    var response = await http.get(
      url,
      headers: "Authorization": "Bearer $accessToken",
    );
    return response;
  

但是当我在 initState 中调用 addToList 方法在 build 方法之前检索数据时，主 UI 消失了。

这有什么问题？

【参考方案1】：

您可以在 initState 中调用 async 函数，但由于它本身不是异步函数，因此它不会等待 future 完成后再转到 build 方法，这就是您的 UI 消失的原因，因为它是在没有数据的情况下构建的所以没有卡。我建议在您的构建方法中使用FutureBuilder 在异步函数返回时进行构建。