Question

我想在单页中执行多个将来的HTTP请求时提高性能。万一，我想建立一个仪表板页面。在仪表板中，我有4个端点url，它们在每个端点中返回不同的结果，应显示在仪表板页面中。

此处为加载数据时的示例代码

var client = new http.Client();

Future main() async {

  var newProducts = await client.get("${endpoint}/product?type=newly&limit=5");

  ProductListResponse newProductResponse = ProductListResponse.fromJson(json.decode(newProducts.body));

  var bestSeller = await client.get("${endpoint}/product?type=best-seller&limit=5");

  ProductListResponse bestSellerResponse = ProductListResponse.fromJson(json.decode(bestSeller.body));

  var outOfStock = await client.get("${endpoint}/product?type=out-of-stock&limit=5");

  ProductListResponse outOfStockResponse = ProductListResponse.fromJson(json.decode(outOfStock.body));

  var lastRequest = await client.get("${endpoint}/product-request?type=newly&limit=5");

  ProductRequestListResponse productRequestResponse = ProductRequestListResponse.fromJson(json.decode(lastRequest.body));
}

当我使用邮递员手动命中每个端点时，它需要200毫秒才能返回结果。但是当我在flutter应用程序中实现时，花了将近2秒钟。

获取数据时我可以提高性能吗？

Answer 1

代码运行速度如此之慢的原因是您正在一个一个地发出这些HTTP请求。每个await都将花费一些时间。

您可以不使用await并使用回调（.then）来实现逻辑，也可以使用Future.wait将Futures组合为一个，并使用await未来。

您的代码将如下所示：

var responses = await Future.wait([
  client.get("${endpoint}/product?type=newly&limit=5"),
  client.get("${endpoint}/product?type=best-seller&limit=5"),
  client.get("${endpoint}/product?type=out-of-stock&limit=5"),
  client.get("${endpoint}/product-request?type=newly&limit=5")
]);

Flutter运行多个http请求需要很多时间

1 个答案: