Flutter如何与后端API交互

在Flutter中，与后端API交互通常是通过HTTP请求来实现的。你可以使用Dart语言提供的http库来发送HTTP请求和处理响应。以下是一个简单的例子，展示了如何使用http库从一个假设的后端API获取数据：

首先，你需要在你的pubspec.yaml文件中添加http包的依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3 # 请检查是否有更新的版本

然后，你可以创建一个函数来发送GET请求：

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

Future<Map<String, dynamic>> fetchData() async {
  // 替换为你的API URL
  final url = 'https://your-backend-api.com/data';

  try {
    // 发送GET请求
    final response = await http.get(Uri.parse(url));

    // 如果服务器返回了200 OK响应，则处理响应体
    if (response.statusCode == 200) {
      // 将JSON响应转换为Dart Map
      return json.decode(response.body);
    } else {
      // 如果服务器没有返回200 OK响应，则抛出异常
      throw Exception('Failed to load data');
    }
  } catch (e) {
    // 处理网络请求或解析过程中的错误
    throw Exception('Failed to fetch data: $e');
  }
}

在上面的代码中，我们定义了一个fetchData函数，它使用http.get方法发送一个GET请求到指定的URL。如果请求成功并且服务器返回了200 OK状态码，我们就将响应体从JSON格式转换为Dart的Map对象。如果请求失败或者服务器返回了错误的状态码，我们就抛出一个异常。

你可以在你的Flutter应用中的任何地方调用这个函数来获取数据。例如，你可以在一个FutureBuilder中使用它来构建UI：

import 'package:flutter/material.dart';
import 'fetch_data.dart'; // 假设fetchData函数在另一个文件中定义

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, dynamic>>(
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          // 使用获取到的数据构建UI
          Map<String, dynamic> data = snapshot.data!;
          return Text('Data: ${data['someKey']}');
        }
      },
    );
  }
}

在上面的例子中，FutureBuilder会等待fetchData函数的结果，并根据结果的状态来构建UI。如果数据还在加载中，它会显示一个进度指示器。如果加载过程中发生了错误，它会显示错误信息。一旦数据加载完成，它就会使用这些数据来构建UI。

这只是一个基本的例子，实际应用中可能需要处理更复杂的情况，比如发送POST请求、上传文件、处理认证和授权等。但是基本的流程是相似的：使用http库发送请求，然后根据响应来更新UI。