Flutter网络数据获取插件fetch_client的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter网络数据获取插件fetch_client的使用

插件简介

fetch_client 是一个基于 Fetch API 的HTTP客户端，它提供了与 package:http 客户端类似的接口，并且具有WASM支持。它是为Manifest V3 扩展提供的一种即插即用的解决方案。

主要特性

  • WASM-ready internals：内部支持WASM。
  • Cancel requests：可以取消请求。
  • Support data streaming：支持数据流操作：
    • 将响应作为 Stream 获取。
    • 在基于Chromium 105+的浏览器中可选地将 Stream 作为请求体发送。
  • Get access to redirect URL and status：获取重定向URL和状态。
  • Support non-200 responses：支持非200响应（仅在网络错误时失败）。
  • Simulate redirects responses via probe request and artificial location header：通过探测请求和人工 location 头模拟重定向响应。

注意事项

大型有效负载

该模块将 keepalive 映射到 BaseRequest.persistentConnection，默认值为 true。根据 Fetch 规范，带有 keepalive 标志的最大请求大小为64KiB。因此，如果请求大于64KiB（包括一些其他数据，如头信息），BaseRequest.persistentConnection 将被忽略并视为 false。

请求流

请求流只在基于Chromium 105+的浏览器中受支持，并且需要服务器使用HTTP/2或HTTP/3。有关更多信息，请参阅 MDN兼容性图表 和 Chrome Developers博客。

示例代码

下面是一个完整的示例，展示了如何使用 fetch_client 进行网络请求：

import 'dart:convert';

import 'package:fetch_client/fetch_client.dart';
import 'package:http/http.dart' as http;

void main() async {
  // 创建一个FetchClient实例，设置请求模式为CORS
  final client = FetchClient(mode: RequestMode.cors);
  
  // 构建目标URL
  final uri = Uri.https('jsonplaceholder.typicode.com', '/todos/1');
  
  // 发送GET请求
  final response = await client.send(Request('GET', uri));

  // 输出是否发生重定向以及最终的URL
  print('Redirected: ${response.redirected}');
  print('Final URL: ${response.url}');

  // 将响应流解码为字符串并输出
  print('Response Body:');
  print(await utf8.decodeStream(response.stream));
}

添加依赖

要在Flutter项目中使用 fetch_client，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  fetch_client: ^latest_version # 请替换为实际的最新版本号

然后运行 flutter pub get 来安装依赖。

运行示例

确保你已经正确配置了Flutter环境后，可以通过以下命令来运行上述示例：

flutter run

这将会启动你的应用，并执行上面定义的网络请求逻辑。如果你想要测试这个功能，建议使用模拟器或物理设备进行调试。

以上就是关于 fetch_client 插件的基本介绍和使用方法。希望这些信息能够帮助你在Flutter项目中更好地处理网络请求！如果有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter网络数据获取插件fetch_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter网络数据获取插件fetch_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用fetch_client插件来获取网络数据的示例代码。fetch_client是一个轻量级的HTTP客户端，用于在Flutter应用中发送网络请求。

首先，确保你已经在pubspec.yaml文件中添加了fetch_client依赖：

dependencies:
  flutter:
    sdk: flutter
  fetch_client: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以按照以下步骤使用fetch_client来获取网络数据：

  1. 导入fetch_client包：
import 'package:fetch_client/fetch_client.dart';
  1. 定义一个函数来发送网络请求：
Future<dynamic> fetchData(String url) async {
  try {
    // 使用FetchClient发送GET请求
    var response = await FetchClient().get(url);
    
    // 检查响应状态码
    if (response.statusCode == 200) {
      // 解析并返回响应数据
      return jsonDecode(response.body);
    } else {
      // 处理错误响应
      throw Exception('Failed to load data: ${response.statusCode}');
    }
  } catch (e) {
    // 处理网络异常
    print('Error: $e');
    throw e;
  }
}
  1. 在UI中使用获取的数据：
import 'package:flutter/material.dart';
import 'dart:convert';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Client Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<dynamic> data = [];
  bool isLoading = true;
  String errorMessage = '';

  @override
  void initState() {
    super.initState();
    // 调用fetchData函数获取数据
    fetchData('https://api.example.com/data')
        .then((value) => setState(() {
              data = value;
              isLoading = false;
            }))
        .catchError((error) => setState(() {
              isLoading = false;
              errorMessage = error.toString();
            }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Client Example'),
      ),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : Column(
              children: [
                if (errorMessage.isNotEmpty)
                  Text(
                    errorMessage,
                    style: TextStyle(color: Colors.red),
                  ),
                Expanded(
                  child: ListView.builder(
                    itemCount: data.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(data[index]['title']), // 假设数据中有'title'字段
                      );
                    },
                  ),
                ),
              ],
            ),
    );
  }
}

在这个示例中，我们定义了一个fetchData函数，该函数使用FetchClient发送GET请求并解析JSON响应。然后，在MyHomePage组件中，我们在initState方法中调用fetchData函数，并在UI中显示获取的数据或错误信息。

请根据你的实际需求调整URL和解析逻辑。希望这个示例能帮你更好地理解如何在Flutter项目中使用fetch_client插件来获取网络数据。

回到顶部