Flutter网络请求与JSON处理插件json_http_client的使用

在Flutter中，网络请求和JSON处理是非常常见的任务。json_http_client 是一个简化网络请求和JSON处理的插件，它基于 http 包，并提供了更方便的API来处理JSON数据。

1. 安装 json_http_client 插件

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

dependencies:
  flutter:
    sdk: flutter
  json_http_client: ^1.0.0

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

2. 使用 json_http_client 进行网络请求

json_http_client 提供了一个 JsonHttpClient 类，它封装了常见的HTTP请求方法（如 get、post、put、delete 等），并自动处理JSON数据的编码和解码。

示例：发送GET请求并解析JSON

import 'package:flutter/material.dart';
import 'package:json_http_client/json_http_client.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _responseData = 'Loading...';

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

  Future<void> _fetchData() async {
    final client = JsonHttpClient();

    try {
      final response = await client.get('https://jsonplaceholder.typicode.com/posts/1');
      setState(() {
        _responseData = response.toString();
      });
    } catch (e) {
      setState(() {
        _responseData = 'Failed to load data: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('JSON HTTP Client Example'),
      ),
      body: Center(
        child: Text(_responseData),
      ),
    );
  }
}

示例：发送POST请求并发送JSON数据

Future<void> _postData() async {
  final client = JsonHttpClient();

  try {
    final response = await client.post(
      'https://jsonplaceholder.typicode.com/posts',
      body: {
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      },
    );
    setState(() {
      _responseData = response.toString();
    });
  } catch (e) {
    setState(() {
      _responseData = 'Failed to post data: $e';
    });
  }
}

3. 处理响应数据

json_http_client 会自动将响应数据解析为 Map<String, dynamic> 或 List<dynamic> 类型，因此你可以直接使用这些数据。

final response = await client.get('https://jsonplaceholder.typicode.com/posts/1');
final title = response['title']; // 访问JSON中的字段

4. 错误处理

json_http_client 会在网络请求失败时抛出异常，因此你可以使用 try-catch 块来捕获并处理这些错误。

try {
  final response = await client.get('https://jsonplaceholder.typicode.com/posts/1');
  setState(() {
    _responseData = response.toString();
  });
} catch (e) {
  setState(() {
    _responseData = 'Failed to load data: $e';
  });
}

5. 自定义请求头

你可以通过 headers 参数来自定义请求头：

final response = await client.get(
  'https://jsonplaceholder.typicode.com/posts/1',
  headers: {
    'Authorization': 'Bearer your_token',
  },
);

6. 其他HTTP方法

json_http_client 还支持其他HTTP方法，如 put、delete 等：

final response = await client.put(
  'https://jsonplaceholder.typicode.com/posts/1',
  body: {
    'title': 'new title',
  },
);