flutter项目中,应该如何请求接口数据

388 阅读1分钟

在Flutter中,可以使用以下几种常见的方式请求接口数据:

1. http 库 - 添加依赖:在pubspec.yaml文件中添加http库的依赖:

dependencies: http: ^1.1.0

然后运行flutter pub get获取依赖。

  • 示例代码
import 'package:http/http.dart' as http; 
Future<void> fetchData() async { 
    final response = await http.get(Uri.parse('https://your-api-url.com/api/data')); 
    if (response.statusCode == 200) { // 成功获取数据,可以对数据进行解析处理,例如如果是JSON数据 
        final data = json.decode(response.body); 
        print(data); 
    } else { // 请求失败,处理错误 
        print('Request failed with status: ${response.statusCode}'); 
    }
} 

2. dio 库 - 添加依赖

    dependencies: dio: ^5.1.1 

同样运行flutter pub get

  • 示例代码
import 'package:dio/dio.dart'; 
Future<void> fetchDataWithDio() async { 
    final dio = Dio(); 
    try { 
        final response = await dio.get('https://your-api-url.com/api/data'); 
        if (response.statusCode == 200) { 
            final data = response.data; print(data); 
        } 
    } catch (e) { 
        print('Error: $e'); 
    } 
} 

3. 在Flutter应用的模型 - 视图 - 视图模型(MVVM)或类似架构模式下请求数据

  • 结合provider包(以MVVM为例)
    • 添加依赖
dependencies: provider: ^6.0.5 
  • 创建视图模型(ViewModel)类
class MyViewModel with ChangeNotifier { 
    List<dynamic> _data = []; 
    List<dynamic> get data => _data; 
    Future<void> fetchData() async { 
        final dio = Dio(); 
        try { 
            final response = await dio.get('https://your - api - url.com/api/data'); 
            if (response.statusCode == 200) { 
                _data = response.data; 
                notifyListeners(); 
            } 
        } catch (e) { 
            print('Error: $e'); 
        } 
   } 
} 
  • 在视图(Widget)中使用
class MyWidget extends StatelessWidget { 
    @override Widget build(BuildContext context) { 
        final viewModel = Provider.of<MyViewModel>(context); 
        return Scaffold( 
            appBar: AppBar(title: Text('Data Fetching')), 
            body: FutureBuilder( 
                future: viewModel.fetchData(), 
                builder: (context, snapshot) { 
                    if (snapshot.connectionState == ConnectionState.waiting) { 
                        return Center(child: CircularProgressIndicator()); 
                    } else if (snapshot.hasError) { 
                        return Center(
                            child: Text('Error: ${snapshot.error}')); 
                    } else { 
                        return ListView.builder( 
                            itemCount: viewModel.data.length, 
                            itemBuilder: (context, index) { 
                                return ListTile( 
                                    title: Text(viewModel.data[index]['title']), 
                                ); 
                            }, 
                        ); 
                    } 
               }, 
        ), 
     ); 
    } 
} 

这些方法可以根据项目的具体需求(如对请求的定制化程度、错误处理的方便性等)来选择使用。