Flutter：如何更快地获取数据？

Flutter：如何更快地获取数据？

在 Flutter 开发中，如果你需要从多个 API 接口获取数据，并且这些请求之间互不依赖，那么并行发起请求会显著提高数据获取的速度。以下是一个详细的示例，展示了如何分别使用串行和并行的方式获取数据，并对比这两种方法。

代码示例-1：串行请求

在这种方法中，每个 HTTP 请求必须等前一个请求完成才能继续执行。

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Serial Requests Example'),
        ),
        body: Center(
          child: SerialRequestExample(),
        ),
      ),
    );
  }
}

class SerialRequestExample extends StatefulWidget {
  @override
  _SerialRequestExampleState createState() => _SerialRequestExampleState();
}

class _SerialRequestExampleState extends State<SerialRequestExample> {
  String todos = '';
  String posts = '';
  String users = '';

  @override
  void initState() {
    super.initState();
    _fetchDataSerially();
  }

  Future<void> _fetchDataSerially() async {
    todos = await fetchData('https://api.example.com/todos');
    setState(() {});
    posts = await fetchData('https://api.example.com/posts');
    setState(() {});
    users = await fetchData('https://api.example.com/users');
    setState(() {});
  }

  Future<String> fetchData(String url) async {
    final response = await http.get(Uri.parse(url));
    return jsonDecode(response.body).toString();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Todos: $todos'),
        Text('Posts: $posts'),
        Text('Users: $users'),
      ],
    );
  }
}

代码示例-2：并行请求

在这种方法中，所有三个请求并行发起，可以同时发送，互不依赖。

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Parallel Requests Example'),
        ),
        body: Center(
          child: ParallelRequestExample(),
        ),
      ),
    );
  }
}

class ParallelRequestExample extends StatefulWidget {
  @override
  _ParallelRequestExampleState createState() => _ParallelRequestExampleState();
}

class _ParallelRequestExampleState extends State<ParallelRequestExample> {
  String todos = '';
  String posts = '';
  String users = '';

  @override
  void initState() {
    super.initState();
    _fetchDataParallelly();
  }

  Future<void> _fetchDataParallelly() async {
    List<Future<String>> futures = [
      fetchData('https://api.example.com/todos'),
      fetchData('https://api.example.com/posts'),
      fetchData('https://api.example.com/users'),
    ];

    List<String> results = await Future.wait(futures);
    setState(() {
      todos = results[0];
      posts = results[1];
      users = results[2];
    });
  }

  Future<String> fetchData(String url) async {
    final response = await http.get(Uri.parse(url));
    return jsonDecode(response.body).toString();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Todos: $todos'),
        Text('Posts: $posts'),
        Text('Users: $users'),
      ],
    );
  }
}

主要区别

• 串行请求：每个请求依赖于前一个请求的结果，必须等前一个请求完成才能继续执行。
• 并行请求：所有三个请求并行发起，可以同时发送，互不依赖，可以显著提高数据获取的速度。

完整输出

将上述代码分别复制到你的 Flutter 项目中，运行后即可看到串行和并行请求的效果。通过对比，你可以明显感受到并行请求在数据获取速度上的优势。