Flutter - 同时请求多个 API 的最佳方式答案

【问题标题】：Flutter - Best way to request Multiple APIs simultaneouslyFlutter - 同时请求多个 API 的最佳方式
【发布时间】：2019-11-30 07:41:04
【问题描述】：

我有两个 URL，我正在使用 fetchData() 函数来解析 json。

Future<Iterable> fetchData() async {
var response = await http.get(firstUrl);
var listOne = List<Article>();

if (response.statusCode == 200) {
  var notesJson = json.decode(response.body);
  var bodyList = notesJson['items'];
  for (var i in bodyList) {
    listOne.add(Article.fromJson(i));
  }
}
var resp = await http.get(secondUrl);
var listTwo = List<Article>();
if (resp.statusCode == 200) {
  var notesJson = json.decode(resp.body);
  var bodyList = notesJson['items'];
  for (var i in bodyList) {
    listTwo.add(Article.fromJson(i));
  }
}

var newL = [...listOne, ...listTwo];
return newL;
}

我觉得这是多余的。我想知道这是否是正确的方法，或者我可以优化它吗？由于我要查询两个 URL，我应该使用 compute() 来代替吗？

【问题讨论】：

标签： flutter dart future

【解决方案1】：

Flutter 的 compute 产生了另一个 Isolate（Dart 中的类似线程的东西），这对于等待网络请求来说是相当耗费资源的。令人高兴的是，Dart 是基于事件循环的，因此您可以通过简单地将两个网络请求 Futures 包装在对 Future.wait 的调用中来同时等待这两个请求。有关 Dart 事件循环的更多信息，您可能需要查看 explanatory video about Futures on Flutter's YouTube channel。

Future<List<Article>> fetchData() async {
  var responses = await Future.wait([
    http.get(firstUrl),
    http.get(secondUrl),
  ]);
  return <Article>[
    ..._getArticlesFromResponse(responses[0]),
    ..._getArticlesFromResponse(responses[1]),
  ];
}

List<Article> _getArticlesFromResponse(http.Response response) {
  return [
    if (response.statusCode == 200)
      for (var i in json.decode(response.body)['items'])
        Article.fromJson(i),
  ];
}

【讨论】：

它给了我这个错误参数类型'List'不能分配给参数类型'Iterable>'。
这是因为你必须将这些函数的返回类型 http.get(firstUrl) 设为future。

【解决方案2】：

您可以使用Dio 包。

response = await Future.wait([dio.post('/info'), dio.get('/token')]);

【讨论】：

【解决方案3】：

如果你有动态列表，你可以使用Future.forEach 方法；

例如：

var list = ["https://first.api.url",
            "https://second.api.url",
            "https://third.api.url"];

void makeMultipleRequests(){
   await Future.forEach(list, (url) async{
        await fetchData(url);
       });
     }

Future<Iterable> fetchData(String url) async {
       var response = await http.get(url);

     print(response.body);
  
    }

【讨论】：