Flutter Http 即将到来 Null

Question

我开始学习使用 API 工作。我尝试了一个 api 没有身份验证 reqres.in 并且它对我有用。但是现在我试图从使用密钥的 api 获取数据，并且该数据变为空。当我在网络浏览器上像这样使用我的密钥时 https://api.rawg.io/api/games?key=MY_API_KEY&page=1 它的工作（我可以看到 JSON 数据）。但是当我为我的工作代码数据使用这个 api 键时，我不明白为什么。

这是我的代码

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  Future<Welcome> apiCall() async {
    final response = await http.get(Uri.parse(
        'https://api.rawg.io/api/games?key=84e37baf...(mykey)&page=1'));

    return Welcome.fromJson(jsonDecode(response.body));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder<Welcome>(
          future: apiCall(),
          builder: (context, snapshot) {
            var growableList = [];
            List<Result> data = snapshot.data!.results;
            growableList.add(data[0].name);
            return Text('${growableList}');
          },
        ),
      ),
    );
  }
}

Answer 1

FutureBuilders 通过调用异步函数然后立即调用构建来工作。这就是您看到 null 的原因。他们将在未来 returns.

后再次重建

即使您已将 apiCall 标记为异步，构建器也不会等待它完成。您需要做的是检查 snapshot.hasData 只有在未来完成后才会为真。当 snapshot.hasData 为 false 时，您需要 return 一个不同的小部件。

也可能值得使用 snapshot.hasError，它是一个布尔值，表示在完成异步功能时是否发生错误。

试试这个代码

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  Future<Welcome> apiCall() async {
    final response = await http.get(Uri.parse(
        'https://api.rawg.io/api/games?key=84e37baf...(mykey)&page=1'));

    return Welcome.fromJson(jsonDecode(response.body));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder<Welcome>(
          future: apiCall(),
          builder: (context, snapshot) {
            if(snapshot.hasError){
              print(snapshot.error);
            }
            if(snapshot.hasData){
              var growableList = [];
              List<Result> data = snapshot.data!.results;
              growableList.add(data[0].name);
              return Text('${growableList}');
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

Answer 2

我解决了这个问题。问题出在数据类中，有一些类具有相同的名称和变量问题，例如 int 或 double，例如，当我尝试使用示例响应生成我的代码时，我使用了 int except double。但实际得到双重变数的反应。像这样的错误不允许我打印它。

Flutter Http 即将到来 Null

Flutter Http get coming Null

api

http

dart

flutter