什么是 Future 以及如何使用它？

Question

我收到以下错误：

A value of type 'Future<int>' can't be assigned to a variable of type 'int'

它可能是另一种类型而不是int ，但基本上模式是：

A value of type 'Future<T>' can't be assigned to a variable of type 'T'

所以：

• Future到底是什么？
• 我如何获得我想要获得的实际价值？
• 当我只有一个Future<T>时，我使用什么小部件来显示我的值？

Answer 1

^{如果您熟悉Task<T>或Promise<T>以及async / await模式，那么您可以直接跳到“如何在 Flutter 中将 Future 与小部件一起使用”部分。}

什么是 Future 以及如何使用它？

好吧，文档说：

代表延迟计算的 object。

那是对的。 它也有点抽象和干燥。 通常，function 返回结果。 依次。 function 被调用、运行并返回结果。 在那之前，呼叫者等待。 某些功能，尤其是当它们访问硬件或网络等资源时，需要一些时间来完成。 想象一下从 web 服务器加载头像图片，从数据库加载用户数据或从设备 memory 加载多种语言的应用程序文本。 那可能很慢。

默认情况下，大多数应用程序具有单一控制流。 当这个流程被阻塞时，例如通过等待需要时间的计算或资源访问，应用程序就会冻结。 如果您足够大，您可能会记住这是标准，但在当今世界，这将被视为错误。 即使有些事情需要时间，我们也会得到一点 animation。 一个微调器，一个沙漏，也许是一个进度条。 但是应用程序如何运行并显示 animation 却仍然等待结果？ 答案是：异步操作。 在您的代码等待某事时仍在运行的操作。 现在编译器如何知道它是否应该停止一切并等待结果或继续所有后台工作并仅在这种情况下等待？ 好吧，它自己无法弄清楚。 我们必须告诉它。

这是通过称为async和await的模式实现的。 它不特定于flutter或dart ，它在许多其他语言中以相同的名称存在。 您可以在此处找到 Dart 的文档。

由于需要一些时间的方法不能立即返回，所以它会在完成后返回传递值的 promise。

这称为Future 。 因此，从数据库中加载数字的 promise 将返回Future<int> ，而从互联网搜索返回电影列表的 promise 可能返回Future<List<Movie>> 。 Future<T>是将来会给你一个T的东西。

让我们尝试不同的解释：

Future 表示异步操作的结果，可以有两种状态：未完成或已完成。

最有可能的是，由于您这样做不仅仅是为了好玩，您实际上需要Future<T>的结果才能在您的应用程序中取得进展。 您需要显示数据库中的数字或找到的电影列表。 所以你要等，直到结果出来。 这就是await的用武之地：

Future<List<Movie>> result = loadMoviesFromSearch(input);

// right here, you need the result. So you wait for it:
List<Movie> movies = await result;

但是等等，我们不是绕了一圈吗？ 我们不是又要等结果了吗？ 是的，我们确实是。 如果程序没有顺序流的相似性，它们将是完全混乱的。 但关键是使用关键字await我们已经告诉编译器，此时，虽然我们想等待结果，但我们不希望我们的应用程序只是冻结。 我们希望所有其他正在运行的操作（例如动画）继续进行。

但是，您只能在本身被标记为async并返回Future<T>的函数中使用await关键字。 因为当您await某些东西时，正在等待的 function 不能再立即返回它们的结果。 您只能退回您拥有的，如果您必须等待它，您必须退回 promise 以便稍后交付。

Future<Pizza> getPizza() async {
    Future<PizzaBox> delivery = orderPizza();        

    var pizzaBox = await delivery;

    var pizza = pizzaBox.unwrap();
    
    return pizza;   
}

我们的 getPizza function 必须等待披萨，所以不是立即返回Pizza ，而是返回 promise 表示将来会有披萨。 现在您可以反过来在某处await getPizza function。

如何将 Future 与 Flutter 中的小部件一起使用？

flutter 中的所有小部件都需要实际值。 不是一些 promise 的值稍后会出现。 当按钮需要文本时，它不能使用 promise，该文本稍后会出现。 它现在需要显示按钮，所以它现在需要文本。

但有时，你所拥有的只是一个Future<T> 。 这就是FutureBuilder的用武之地。您可以在有未来时使用它，在等待它时显示一件事（例如进度指示器），在完成时显示另一件事（例如结果）。

让我们看一下我们的披萨示例。 您想订购比萨饼，在等待时需要进度指示器，希望在送达后查看结果，并且可能在出现错误时显示错误消息：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

/// ordering a pizza takes 5 seconds and then gives you a pizza salami with extra cheese
Future<String> orderPizza() {
  return Future<String>.delayed(Duration(seconds: 5), () async => 'Pizza Salami, Extra Cheese');
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Center(
          child: PizzaOrder(),
        ),
      ),
    );
  }
}

class PizzaOrder extends StatefulWidget {
  @override
  _PizzaOrderState createState() => _PizzaOrderState();
}

class _PizzaOrderState extends State<PizzaOrder> {
  Future<String> delivery;

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          RaisedButton(
            onPressed: delivery != null ? null : () => setState(() { delivery = orderPizza(); }),
            child: Text('Order Pizza Now')
          ),
          delivery == null
            ? Text('No delivery scheduled')
            : FutureBuilder(
              future: delivery,
              builder: (context, snapshot) {
                if(snapshot.hasData) {
                  return Text('Delivery done: ${snapshot.data}');
                } else if(snapshot.hasError) {
                  return Text('Delivery error: ${snapshot.error.toString()}');
                } else {
                  return CircularProgressIndicator();
                }
              })
        ]);
  }
}

这就是你如何使用 FutureBuilder 来显示你未来的结果。

Answer 2

Future<T>返回将由async工作完成的潜在值

例如：

Future<int> getValue() async {
    return Future.value(5);
  }

上面的代码返回的是int类型的Future.value(5) ，但是在从方法接收值时我们不能使用类型Future<int>即

Future<int> value = await getValue();  // Not Allowed
// Error
A value of type 'Future<int>' can't be assigned to a variable of type 'int'

解决上述 getValue() 应在int类型下接收

  int value = await getValue(); // right way as it returning the potential value. 

Answer 3

以下是来自其他语言的 Dart Future的类比列表：

• JS： Promise
• Java： Future
• Python： Future
• C#： Task

就像在其他语言中一样，Future 是一种特殊类型的 object，它允许使用 async/await 语法糖，以同步/线性方式编写异步代码。 您从异步方法返回 Future 而不是接受回调作为参数并避免回调地狱 - Futures 和回调都解决相同的问题（稍后触发一些代码）但方式不同。

Answer 4

我希望这个关键点能够提供信息，我用两种不同的 Async 方法来展示它：

请注意以下方法，其中showLoading() 、 getAllCarsFromApi()和hideLoading()是内部Async方法。

如果我将await关键字放在showLoading()之前，则操作会等到它完成然后转到下一行，但我故意删除了await ，因为我需要与正在处理getAllCarsFromApi()同时显示我的加载对话框，所以这意味着showLoading()和getAllCarsFromApi()方法在不同的线程上处理。 最后hideLoading()隐藏加载对话框。

Future<List<Car>> getData() async{
   showLoading();
   final List<Car> cars = await getAllCarsFromApi();
   hideLoading();
   return cars;
}

现在看看这个另一个Async方法，这里的getCarByIdFromApi()方法需要一个从getCarIdFromDatabase()计算的id ，所以在第一个方法之前必须有一个await关键字，以使Operation等待直到id被计算并传递给第二种方法。 所以这里两个方法一个接一个地在一个线程中处理。

Future<Car> getCar() async{
   int id = await getCarIdFromDatabase();
   final Car car = await getCarByIdFromApi(id);
   return car;
}

Answer 5

一个简单的答案是，如果 function delay一段时间返回其值，则使用Future获取其值。

Future<int> calculate({required int val1, required int val2}) async {
    await Future.delayed(const Duration(seconds: 2));
    return val1 + val2;
  }

如果我们将上述 function 称为

getTotal() async { 

      int result = calculate(val1: 5, val2: 5);

    print(result);
  }

我们会得到以下错误：

A value of type 'Future<int>' can't be assigned to a variable of type 'int'

但是如果我们在 function 调用之前使用 await ，它将在延迟后给出 function 的实际返回值

getTotal() async { 

    int result = calculate(val1: 5, val2: 5);

   print(result);
 }

must需要关键字async才能await Future 获得返回值

Answer 6

Future 是一种异步操作，可用于执行可能需要一些时间才能完成的任务。 它允许您编写在特定任务完成后运行的代码，例如 API 调用。 Future 可用于确保任务在执行任何其他代码之前完成。

例如，如果您正在进行 API 调用，则可以使用 Future 来确保 API 调用在任何其他代码运行之前完成：

/// This is a Flutter Future
Future<String> fetchData() async {
  /// Make API call
  String data = await apiCall();

  /// Return the result
  return data;
}

// Use the Future
void main() {
  fetchData().then((data) {
    // Do something with the data
  });
}