在互联网连接丢失后，如何使用Rest APi显示从服务器提取的数据

Question

我使用Rest-Api构建了一个Flutter聊天应用程序，并使用http从服务器获取了所有用户。GET，请求并显示为Listview，如我下面的代码所示，但只有当存在Internet连接时，如果Internet连接丢失，User才会显示为Listview。我得到一个空白屏幕。我调用fetchData((；当应用程序第一次打开时，ininState(｛｝(内部的方法获取所有用户，并且我将所有用户存储在列表中，它运行良好，但如果互联网连接丢失，我会出现黑屏。我想显示已经提取的用户，即使互联网连接丢失。

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:taxiyee_messaging_app/models/message_model.dart';
import 'package:taxiyee_messaging_app/screens/chatscreen.dart';
import 'package:http/http.dart' as http;
import 'package:taxiyee_messaging_app/screens/login_screen.dart';
import '../models/usermodel.dart';
class ChatList extends StatefulWidget {
bool items;
ChatList({required this.items});
@override
State<ChatList> createState() => _ChatListState();
}

class _ChatListState extends State<ChatList> {
late Future<dynamic> futureUser;
List<User> userList = [];
List<User> myuserList = [];
bool items =true;
@override
void initState() {
// TODO: implement initState
super.initState();
futureUser = fetchData();
}
@override
Widget build(BuildContext context) {
return items? ListView.builder(
shrinkWrap: true,
itemCount: userList.length,
itemBuilder: (BuildContext context, int index) {
var user = userList[index];
var sender = userList[index].sender;
return Column(
children: [
ListTile(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context){
return Chatscreen(user:User(message: user, sender: sender));
}));
},
leading: const CircleAvatar(
radius: 30,
child: Icon(Icons.person),
),
trailing: const CircleAvatar(
child: Text("2"),
),
title: Text(sender["name"]),
subtitle: Text(user.message),
),
const Divider(
thickness: 0.5,
color: Colors.blue,
),
],
);
},
):Container(width: 200,
height: 400,
color: Colors.red,);
/////////////
}

fetchData() async {
final response = await http.get(
Uri.parse('https://staging.taxiye.com:7003/chatst'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
"Authorization": authToken,
},
);
if (response.statusCode == 200) {
print(response.body);
var values = json.decode(response.body)["allChats"];
var mychatvalues = json.decode(response.body)["myChats"];
if (values.length > 0) {
for (int i = 0; i < values.length; i++) {
if (values[i] != null) {
Map<String, dynamic> map = values[i];
setState(() {
userList.add(User.fromJson(map));
});
}
}
}
if (mychatvalues.length > 0) {
for (int i = 0; i < mychatvalues.length; i++) {
if (mychatvalues[i] != null) {
Map<String, dynamic> map = mychatvalues[i];
setState(() {
myuserList.add(User.fromJson(map));
});
}
}
}
} else {
// If that call was not successful, throw an error.
throw Exception('Failed to load post');
}
// return
}
}

Answer 1

您需要将服务器数据存储在本地数据库中。流程为：

call api -> store data to local databse -> retrieve from local database.

您可以使用try-catch方法来检查是否有互联网连接。

try {
// call api , store to local db, retrieve from local db
} catch (e) {
retrieve from local db if no network
}