how to avoid the flutter request server flood - flutter

Question

I am using future builder to load some data from the server side, now I found this component will send reqeust to the server side every time refresh, this is my flutter code looks like:
return FutureBuilder(
future: articleDetailController.initArticle(int.parse(article.id)),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
articleDetailController.article = snapshot.data;
return new ArticleDetail();
} else {
return Center(child: CircularProgressIndicator());
}
});
when render this component, the reqeust will trigger so much times, how to avoid the reqeust flood to make the request send only once when load the article detail? this is the initial article function:
Future<Item> initArticle(int id) async {
Item? articleWithContent = await Repo.fetchArticleDetail(id);
if (articleWithContent != null) {
return articleWithContent;
}
return new Item();
}
I have tried to use AsyncMemoizer runonce in the async package but facing a new problem that it only run once with different article id, I want it changed with the article id. I define AsyncMemoizer the like this:
AsyncMemoizer _memoization = AsyncMemoizer<Item>();
and the get article code like this:
Future<Item> initArticle(int id) async {
return await this._memoization.runOnce(() async {
Item? articleWithContent = await Repo.fetchArticleDetail(id);
if (articleWithContent != null) {
return articleWithContent;
}
return new Item();
});
}
this code only load the server api for once, could not load each article by the article id. I also tried to use a flag to control the render invoke action:
Future<Item> initArticle(int id) async {
if (!run) {
run = true;
Item? articleWithContent = await Repo.fetchArticleDetail(id);
run = false;
if (articleWithContent != null) {
return articleWithContent;
}
}
return Future.value(new Item());
}
but the FutureBuilder seem did not render the article that returned from server.

Answer 1

Finally I am using synchronized package to avoid this problem, this code look like this:
Future<String> initArticle(int id) async {
return await lock.synchronized(() async {
// Only this block can run (once) until done
// https://stackoverflow.com/questions/74194103/how-to-avoid-the-flutter-request-server-flood
Item articleWithContent = await Repo.fetchArticleDetail(id);
article = articleWithContent;
return articleWithContent.id;
});
}
import this package and initial like this:
import 'package:synchronized/synchronized.dart';
var lock = new Lock();
By the way, do not forget to cache the article in the deep level of your request function, it still need to load multiple times, the first time fetch from server, and fetched from cache in the rest of request.