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

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

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

fetch_api 是一个为Dart提供的与JavaScript Fetch API兼容的绑定，支持WebAssembly。它提供了丰富的功能来处理网络请求和响应，包括取消请求、读取不同格式的响应内容、流式传输等。

特性

  • 完整的fetch选项/请求参数覆盖
  • 通过AbortController取消请求
  • 响应读取方式：
    • 作为文本（String）
    • 作为Blob
    • 作为Uint8List的Stream
  • 支持响应流式传输
  • 请求流式传输（注意浏览器兼容性）
  • 获取重定向状态
  • 支持非200响应

关于fetch和Request的一些说明

fetch和Request具有相同的选项但有不同的语义。例如，fetch的默认模式是no-cors，而Request的默认模式是cors。因此，尽管它们可以互换使用，并且都继承自RequestInit，但是针对fetch函数和Request构造函数的选项对象被设计为不同的扩展类型。

更多详情请参考MDN文档。

示例Demo

以下是一个简单的示例，展示了如何在Flutter应用中使用fetch_api进行跨域请求并打印返回的数据：

import 'package:fetch_api/fetch_api.dart';

void main() async {
  try {
    // 发起一个简单的跨域请求
    final response = await fetch(
      'https://api.restful-api.dev/objects/1',
      FetchOptions(
        mode: RequestMode.cors, // 设置请求模式为CORS
      ),
    );

    if (!response.ok) {
      print('请求失败，状态码：${response.status}');
      return;
    }

    // 将响应转换为字符串并打印
    String data = await response.text();
    print('请求成功，返回的数据：$data');
  } catch (e) {
    print('发生错误：$e');
  }
}

在这个示例中，我们首先导入了fetch_api包，然后定义了一个异步的main函数。在这个函数里，我们调用了fetch方法发起一个GET请求到指定的URL，并设置了请求模式为cors以允许跨域请求。接着检查响应的状态是否正常（即状态码在200-299之间），如果正常则将响应体转换成字符串并打印出来；否则打印错误信息。此外，还添加了异常捕获机制来处理可能发生的异常情况。

请注意，在实际项目中使用时，请根据您的需求调整URL和其他请求参数。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用fetch_api插件来获取网络数据的示例代码。请注意，fetch_api本身不是一个广泛认知的Flutter插件，但通常我们会使用http包或Dart内置的dart:html（在Web平台上）来进行网络请求。这里，我将使用http包来演示如何获取网络数据，因为这是一个非常流行的选择。

首先，你需要在pubspec.yaml文件中添加http依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 请检查最新版本号

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

接下来是一个完整的Flutter应用示例，展示如何使用http包来获取网络数据：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String _data = '';

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

  Future<void> _fetchData() async {
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

      if (response.statusCode == 200) {
        // 如果服务器返回成功状态码，解析JSON数据
        Map<String, dynamic> data = jsonDecode(response.body);
        setState(() {
          _data = data['title'].toString();  // 假设我们想显示帖子的标题
        });
      } else {
        // 如果请求失败，显示错误信息
        throw Exception('Failed to load data');
      }
    } catch (e) {
      // 捕获并显示任何错误
      setState(() {
        _data = 'Error: ${e.message}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch API Demo'),
      ),
      body: Center(
        child: Text(
          _data,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了http依赖。
  2. 创建了一个Flutter应用，其包含一个主页面MyHomePage。
  3. 在MyHomePage的状态类_MyHomePageState中，使用http.get方法向一个示例API（JSONPlaceholder）发送GET请求。
  4. 如果请求成功（状态码为200），则解析返回的JSON数据，并更新UI以显示数据。
  5. 如果请求失败，则捕获异常并更新UI以显示错误信息。

这个示例展示了如何在Flutter中使用http包来获取和处理网络数据。尽管这里使用的是http包而不是fetch_api，但概念是相似的，且http包是Flutter社区中广泛使用的解决方案。

回到顶部