Flutter网络请求插件edge_http_client的使用

本文将介绍如何在Flutter中使用edge_http_client插件进行网络请求。edge_http_client 是一个用于在Edge环境中使用的Dart包，它基于http包，为开发者提供了更灵活的网络请求能力。

使用说明

安装插件

首先，在项目的pubspec.yaml文件中添加依赖：

dependencies:
  edge_http_client: ^版本号

然后运行以下命令安装依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示如何使用edge_http_client进行GET和POST请求。

1. 导入必要的库

import 'package:flutter/material.dart'; // Flutter核心库
import 'package:edge_http_client/edge_http_client.dart'; // 边缘环境HTTP客户端
import 'package:http/http.dart' as http; // HTTP请求库

2. 创建一个简单的页面

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Edge HttpClient 示例")),
        body: Center(
          child: EdgeHttpClientExample(),
        ),
      ),
    );
  }
}

3. 编写使用EdgeHttpClient的逻辑

class EdgeHttpClientExample extends StatefulWidget {
  @override
  _EdgeHttpClientExampleState createState() => _EdgeHttpClientExampleState();
}

class _EdgeHttpClientExampleState extends State<EdgeHttpClientExample> {
  String _responseText = "点击按钮发起请求";

  void _fetchData() async {
    // 使用EdgeHttpClient作为HTTP客户端
    await runWithClient(() async {
      final response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts/1"));

      if (response.statusCode == 200) {
        setState(() {
          _responseText = response.body; // 将返回的数据更新到UI上
        });
      } else {
        setState(() {
          _responseText = "请求失败: ${response.statusCode}";
        });
      }
    }, () => EdgeHttpClient());
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: _fetchData, // 点击按钮时触发请求
          child: Text("发起GET请求"),
        ),
        SizedBox(height: 20),
        Text(_responseText), // 显示请求结果
      ],
    );
  }
}

代码解析

1. 依赖注入
   runWithClient 方法用于将自定义的HTTP客户端（如EdgeHttpClient）注入到函数中，这样可以在不修改原有逻辑的情况下切换HTTP实现。

2. GET 请求
   在 _fetchData 方法中，我们使用了http.get方法向https://jsonplaceholder.typicode.com/posts/1发起GET请求，并检查响应状态码是否为200。如果是，则将返回数据更新到界面上；否则提示错误信息。

3. UI 更新
   使用setState方法更新UI，确保用户界面能够实时反映网络请求的结果。

运行效果

运行上述代码后，点击按钮会触发网络请求，界面会显示从API返回的数据或错误信息。

扩展：POST 请求

如果需要发送POST请求，可以参考以下代码：

void _sendData() async {
  await runWithClient(() async {
    final response = await http.post(
      Uri.parse("https://jsonplaceholder.typicode.com/posts"),
      headers: {"Content-Type": "application/json"},
      body: '{"title":"foo","body":"bar","userId":1}',
    );

    if (response.statusCode == 201) {
      setState(() {
        _responseText = "数据已成功创建";
      });
    } else {
      setState(() {
        _responseText = "创建失败: ${response.statusCode}";
      });
    }
  }, () => EdgeHttpClient());
}