Flutter网络通信插件mercury_client的使用

简介

mercury_client 是一个支持浏览器和原生环境的可移植HTTP客户端，具有内存缓存功能。它提供了多种HTTP请求方法，包括GET、POST、PUT、DELETE等。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  mercury_client: ^最新版本号

然后运行 flutter pub get 来安装该插件。

基本用法

以下是一个简单的示例，展示了如何使用 mercury_client 发起POST请求：

import 'package:mercury_client/mercury_client.dart';

void main() async {
  var client = HttpClient('http://gateway.your.domain/api-1');

  try {
    // 使用POST方法发起请求
    var response = await client.post(
      'call-foo',
      parameters: {'var': '123'},
      body: "{ 'content': 'any' }",
      contentType: 'application/json',
    );

    if (response.isOK) {
      print(response.body);
    }
  } catch (e) {
    print('Error requesting URL: $e');
  }
}

HttpCache 使用

HttpCache 提供了内存缓存功能，可以用于缓存请求结果。以下是使用 HttpCache 的示例代码：

import 'package:mercury_client/mercury_client.dart';
import 'dart:html' as html;

void main() async {
  // 创建一个HttpCache实例，最大内存为16M，超时时间为5分钟
  var cache = HttpCache(maxCacheMemory: 1024 * 1024 * 16, timeout: Duration(minutes: 5));

  // 创建一个ImageElement来显示加载的数据
  var img = html.ImageElement();

  try {
    // 请求一个可能被缓存的图片URL
    var response = await cache.getURL(
      'http://host/path/to/base64/image.jpeg',
      onStaleResponse: (staleResponse) {
        var staleTime = staleResponse.instanceDateTime;
        print('Stale image available: $staleTime');
        img.src = 'data:image/jpeg;base64,${staleResponse.bodyAsString}';
      },
    );

    if (response.isOK) {
      img.src = 'data:image/jpeg;base64,${response.bodyAsString}';
    }
  } catch (e) {
    print('Error requesting URL: $e');
  }
}

示例项目

以下是一个完整的示例项目，展示了如何使用 mercury_client 进行GET和POST请求，并使用缓存功能：

import 'package:mercury_client/mercury_client.dart';

void main() async {
  print('------------------------------------------------');

  var client = HttpClient('https://www.google.com/');

  // 发起GET请求：https://www.google.com/search?q=mercury_client
  var response = await client.get('search', parameters: {'q': 'mercury_client'});

  if (response.isOK) {
    var body = response.bodyAsString!;
    var ok = body.contains('<html');
    print('Request OK: $ok');
    print(response);
    print('Body Type: ${response.bodyType}\n');
    print('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<');
    print(body);
    print('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>\n');
  } else {
    print('Response Error!');
    print(response);
  }

  print('------------------------------------------------');

  var responsePost = await client.post('search', parameters: {'q': 'mercury_client'});
  assert(responsePost.isError);

  print('Google rejects POST requests!');
  print(responsePost);

  print('------------------------------------------------');

  var cache = HttpCache(verbose: true);

  {
    var response = await cache.get(client, 'search', parameters: {'q': 'mercury_client'});

    var status = response.status;
    var title = _catchTitle(response);

    print('Cached Request 1> status: $status ; title: $title > $cache');
  }

  {
    var response = await cache.get(client, 'search', parameters: {'q': 'mercury_client'});

    var status = response.status;
    var title = _catchTitle(response);

    print('Cached Request 2> status: $status ; title: $title > $cache');
  }

  {
    var client = HttpClient('https://www.google.com/');

    var response = await cache.get(client, 'searchX', parameters: {'q': 'mercury_client'});

    var status = response.status;

    print('Cached Request 3> status: $status > $cache');
  }

  {
    // 设置缓存超时时间为100毫秒
    cache.timeout = Duration(milliseconds: 100);

    // 确保缓存条目延迟1秒
    await Future.delayed(Duration(seconds: 1));

    var response = await cache.get(
      client,
      'search',
      parameters: {'q': 'mercury_client'},
      onStaleResponse: (staleResponse) {
        var staleTime = staleResponse.instanceDateTime;
        print('Stale Response Available> $staleResponse > $staleTime');
      },
    );

    var status = response.status;
    var title = _catchTitle(response);

    print('Cached Request 4> status: $status ; title: $title > $cache');
  }

  print('------------------------------------------------\n');

  print('By!');
}

String? _catchTitle(HttpResponse response) {
  return RegExp(r'<title>\s*(.*?)\s*</').firstMatch(response.bodyAsString!)?.group(1);
}

通过上述示例，您可以了解如何使用 mercury_client 进行网络请求并利用缓存功能提高性能。更多详细信息请参考 官方文档。