Flutter：使用Future发送网络请求

pubspec.yaml配置http的SDK

cupertino_icons: ^1.0.8
http: ^1.2.2

请求数据的格式转换

// Map 转 json
final chat = {'name': '张三','message': '吃饭了吗',
};
final chatJson = json.encode(chat);
print(chatJson);// json转Map
final newChat = json.decode(chatJson);
print(newChat);

发送请求

import 'dart:convert'; // json依赖
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; // http请求依赖class Chat {final String? name;final String? message;final String? imageUrl;Chat({this.name, this.message, this.imageUrl});//factory Chat.formMap(Map map) {return Chat(name: map['name'],message: map['message'],imageUrl: map['imageUrl'],);}
}class ChatPage extends StatefulWidget {@overrideState<ChatPage> createState() => _ChatPageState();
}
class _ChatPageState extends State<ChatPage> {@overridevoid initState() {super.initState();getDatas().then((value) {}).catchError((onError) {}).whenComplete(() {print('数据加载完毕');}).timeout(Duration(seconds: 1)).catchError((err) {print('超时时长1秒，提示请求超时');});}
}// async：异步的请求，不用卡在这等待
Future<List> getDatas() async {final url =Uri.parse('http://rap2api.taobao.org/app/mock/321326/api/chat/list');final res = await http.get(url);if (res.statusCode == 200) {// 获取相应数据，转成Map类型final resBody = json.decode(res.body);// map遍历chat_list，把每一项item转成模型数据，最后转成ListList chatList =resBody['chat_list'].map((item) => Chat.formMap(item)).toList();return chatList;} else {throw Exception('statusCode:${res.statusCode}');}
}

FutureBuilder 发送的请求

return Scaffold(body: Container(child: FutureBuilder(future: getDatas(),builder: (BuildContext context, AsyncSnapshot snapshot) {print('data:${snapshot.data}');if (snapshot.connectionState == ConnectionState.waiting) {return const Center(child: Text('Loading...'),);}return ListView(children: snapshot.data.map<Widget>((item) {return ListTile(title: Text(item.name),subtitle: Container(alignment: Alignment.bottomCenter,height: 25,child: Text(item.message,overflow: TextOverflow.ellipsis,),),leading: Container(width: 44,height: 44,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6.0),image: DecorationImage(image: NetworkImage(item.imageUrl))),));}).toList(),);}),)
);

在这里插入图片描述

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

class _ChatPageState extends State<ChatPage> {List _datas = [];@overridevoid initState() {super.initState();getDatas().then((value) {setState(() {_datas = value;});}).catchError((onError) {});}
}body: Container(child: Container(child: _datas.length == 0 ? Center(child: Text('Loading...')) : ListView.builder(itemCount: _datas.length,itemBuilder: (BuildContext context, int index) {return ListTile(title: Text(_datas[index].name),subtitle: Container(alignment: Alignment.bottomCenter,height: 25,child: Text(_datas[index].message,overflow: TextOverflow.ellipsis,),),leading: Container(width: 44,height: 44,decoration: BoxDecoration(borderRadius: BorderRadius.circular(6.0),image: DecorationImage(image: NetworkImage(_datas[index].imageUrl))),));},))
)