flutter - 调用网络电话的最佳方式是什么？

Question

我是 Flutter 的新手。我想知道在编码最佳实践方面进行网络调用的最佳方法是什么。

我在互联网(包括 Stackoverflow)上搜索了如何进行 REST 调用(GET、POST)并找到了一些代码示例。例如，下面给出了其中之一。

new RaisedButton(
                  onPressed: () async {
                    Post newPost = new Post(
                        userId: "123", id: 0, title: titleControler.text, body: bodyControler.text);
                    Post p = await createPost(CREATE_POST_URL,
                        body: newPost.toMap());
                    print(p.title);
                  },
)

现在，我认为将所有内容都集中在 onPressed() 中并不是一个好主意。我特别想知道如何在页面加载前(或在获取数据后更新)适应网络调用。我知道它是由 setState() 完成的。但是想知道如何将不同的部分组合在一起以编写最佳代码。任何帮助将不胜感激。

Answer 1

最好的方法是让每篇文章都简短并且只针对一项任务。这不是特定于 Flutter(并且适用于一般的任何编码)。一种做法如下所述:

假设您要从 API 中获取员工列表。

定义Employee类，指定强制/非强制属性等，并编写.fromJson()实例化。

在您的有状态小部件中从 didChangeDependencies 开始，如下所示。

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _requestEmployeeListFromAPI();
  }

_requestDataFromAPI() 函数将只是网络调用的指针，如下所示:

Future<void> _requestEmployeeListFromAPI() async {
    try {
      _myList = await network.getEmployeeList();
    } catch (exception) {
      print(exception);
      // ...
      } else {
        // show exception
      }
    } finally {
        if (mounted) {
          setState(() => _isLoadingCompleted = true);
        }
    }

  }

根据 _isLoadingCompleted 的值处理您的 UI

现在，您的网络文件可能包含要在项目中完成的所有网络调用。下面的例子:

Future<List<Employee>> getEmployeeList() async {

  try {
    http.Response response = await http.post(
      "$getEmployeeListUrl",
    );
    Map<String, dynamic> decodedBody = json.decode(response.body);

    print(decodedBody);

    List<Employee> employeeList = (decodedBody["EmployeeList"] as List)
        .map((element) => Employee.fromJson(element))
        .toList();
    return employeeList;
  } catch (e) {
    print(e);
  }
}

这样，每一 block 都写在不同的位置，如果有的话，很容易增强/调试/发现错误。