Flutter：利用Future发送网络请求

pubspec.yaml设置http的SDK

1. cupertino_icons: ^1.0.8
2. http: ^1.2.2

复制代码

  请求数据的格式转换

1. // Map 转 json
2. final chat = {
3.   'name': '张三',
4.   'message': '吃饭了吗',
5. };
6. final chatJson = json.encode(chat);
7. print(chatJson);
9. // json转Map
10. final newChat = json.decode(chatJson);
11. print(newChat);

复制代码

  发送请求

1. import 'dart:convert'; // json依赖
2. import 'package:flutter/material.dart';
3. import 'package:http/http.dart' as http; // http请求依赖
5. class Chat {
6.   final String? name;
7.   final String? message;
8.   final String? imageUrl;
9.   Chat({this.name, this.message, this.imageUrl});
10.   //
11.   factory Chat.formMap(Map map) {
12.     return Chat(
13.       name: map['name'],
14.       message: map['message'],
15.       imageUrl: map['imageUrl'],
16.     );
17.   }
18. }
20. class ChatPage extends StatefulWidget {
21.   @override
22.   State<ChatPage> createState() => _ChatPageState();
23. }
24. class _ChatPageState extends State<ChatPage> {
25.   @override
26.   void initState() {
27.     super.initState();
28.     getDatas().then((value) {
29.    
30.     }).catchError((onError) {
31.       
32.     }).whenComplete(() {
33.       print('数据加载完毕');
34.     }).timeout(Duration(seconds: 1)).catchError((err) {
35.       print('超时时长1秒，提示请求超时');
36.     });
37.   }
38. }
40. // async：异步的请求，不用卡在这等待
41. Future<List> getDatas() async {
42.   final url =
43.       Uri.parse('http://rap2api.taobao.org/app/mock/321326/api/chat/list');
44.   final res = await http.get(url);
45.   if (res.statusCode == 200) {
46.     // 获取相应数据，转成Map类型
47.     final resBody = json.decode(res.body);
48.     // map遍历chat_list，把每一项item转成模型数据，最后转成List
49.     List chatList =
50.         resBody['chat_list'].map((item) => Chat.formMap(item)).toList();
51.     return chatList;
52.   } else {
53.     throw Exception('statusCode:${res.statusCode}');
54.   }
55. }

复制代码

  FutureBuilder 发送的请求

1. return Scaffold(
2.   body: Container(
3.   child: FutureBuilder(
4.       future: getDatas(),
5.       builder: (BuildContext context, AsyncSnapshot snapshot) {
6.         print('data:${snapshot.data}');
7.         if (snapshot.connectionState == ConnectionState.waiting) {
8.           return const Center(
9.             child: Text('Loading...'),
10.           );
11.         }
12.         return ListView(
13.           children: snapshot.data.map<Widget>((item) {
14.             return ListTile(
15.                 title: Text(item.name),
16.                 subtitle: Container(
17.                   alignment: Alignment.bottomCenter,
18.                   height: 25,
19.                   child: Text(
20.                     item.message,
21.                     overflow: TextOverflow.ellipsis,
22.                   ),
23.                 ),
24.                 leading: Container(
25.                   width: 44,
26.                   height: 44,
27.                   decoration: BoxDecoration(
28.                       borderRadius: BorderRadius.circular(6.0),
29.                       image: DecorationImage(
30.                           image: NetworkImage(item.imageUrl))),
31.                 ));
32.           }).toList(),
33.         );
34.       }),
35.   )
36. );

复制代码

   声明变量接收接口数据，在页面中利用该变量去渲染页面的方式

1. class _ChatPageState extends State<ChatPage> {
2.   List _datas = [];
4.   @override
5.   void initState() {
6.     super.initState();
7.     getDatas().then((value) {
8.       setState(() {
9.         _datas = value;
10.       });
11.     }).catchError((onError) {
12.    
13.         });
14.   }
15. }
17. body: Container(
18.   child: Container(
19.     child: _datas.length == 0 ? Center(child: Text('Loading...')) :
20.     ListView.builder(
21.       itemCount: _datas.length,
22.       itemBuilder: (BuildContext context, int index) {
23.         return ListTile(
24.             title: Text(_datas[index].name),
25.             subtitle: Container(
26.               alignment: Alignment.bottomCenter,
27.               height: 25,
28.               child: Text(
29.                 _datas[index].message,
30.                 overflow: TextOverflow.ellipsis,
31.               ),
32.             ),
33.             leading: Container(
34.               width: 44,
35.               height: 44,
36.               decoration: BoxDecoration(
37.                 borderRadius: BorderRadius.circular(6.0),
38.                 image: DecorationImage(image: NetworkImage(_datas[index].imageUrl))
39.               ),
40.             )
41.         );
42.       },
43.     )
44.   )
45. )

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。