Flutter中使用DIO调用API无数据返回问题求助

1. 修复Provider状态通知缺失问题 #

你的getAllArticles方法获取数据后没有通知UI更新，导致Consumer无法感知数据变化。修改ArticleProvider：

Future<List<Article>> getAllArticles() async {
  try {
    const String url = 'https://13.210.163.192:8080/users/public/articles';
    Response response = await dio.get(url);
    articles = (response.data['data']['article'] as List)
        .map((e) => Article.fromJson(e))
        .toList();
    notifyListeners(); // 新增：通知UI刷新
    return articles;
  } catch (e) {
    print('请求错误详情: $e'); // 新增：打印错误方便排查
    rethrow;
  }
}

2. 修正UI层API调用逻辑 #

直接在build方法里调用API会导致重复请求，改成StatefulWidget在初始化时仅调用一次：

class ArticleListScreen extends StatefulWidget {
  const ArticleListScreen({Key? key}) : super(key: key);

  @override
  State<ArticleListScreen> createState() => _ArticleListScreenState();
}

class _ArticleListScreenState extends State<ArticleListScreen> {
  @override
  void initState() {
    super.initState();
    // 初始化时仅调用一次API
    Provider.of<ArticleProvider>(context, listen: false).getAllArticles();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Daftar Artikel')),
      body: Consumer<ArticleProvider>(
        builder: (context, articleProvider, _) {
          return articleProvider.articles.isEmpty
              ? const Center(child: CircularProgressIndicator())
              : ListView.builder(
                  itemCount: articleProvider.articles.length,
                  itemBuilder: (context, index) {
                    final article = articleProvider.articles[index];
                    return ListTile(
                      leading: article.image != null
                          ? Image.network(article.image!)
                          : const Icon(Icons.image), // 处理图片为空的情况
                      title: Text(article.title ?? '无标题'),
                      subtitle: Text(article.author ?? '匿名作者'),
                    );
                  },
                );
        },
      ),
    );
  }
}

3. 处理自签名SSL证书问题 #

你的API用IP地址+HTTPS，大概率是自签名证书，Flutter默认会拒绝，Postman则默认允许。给Dio添加证书忽略配置（仅开发环境使用）：

final Dio dio = Dio();

// 在ArticleProvider初始化时添加：
ArticleProvider() {
  (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
      (HttpClient client) {
    client.badCertificateCallback =
        (X509Certificate cert, String host, int port) => true;
    return client;
  };
}

4. 验证API返回数据结构 #

在请求成功后打印完整返回数据，确认response.data['data']['article']路径是否正确：

print('API返回完整数据: ${response.data}');

如果路径不符（比如实际是response.data['articles']），需要调整解析代码。

5. 检查网络权限配置 #

• Android：在android/app/src/main/AndroidManifest.xml添加

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：在ios/Runner/Info.plist添加

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

内容的提问来源于stack exchange，提问作者Ardhya Chandra