Flutter网络请求插件flutter_kit_http的使用

flutter_kit_http 是一个用于 Flutter 的网络请求插件，它封装了常见的 HTTP 请求操作，使得在 Flutter 中进行网络请求变得更加简单和高效。以下是如何使用 flutter_kit_http 进行网络请求的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_kit_http 的依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_kit_http: ^1.0.0  # 请使用最新版本

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

2. 初始化 HttpClient

在使用 flutter_kit_http 之前，你需要初始化 HttpClient。通常你可以在 main.dart 中进行初始化。

import 'package:flutter_kit_http/flutter_kit_http.dart';

void main() {
  // 初始化 HttpClient
  HttpClient.init(
    baseUrl: 'https://jsonplaceholder.typicode.com', // 你的 API 基础 URL
    connectTimeout: 5000, // 连接超时时间
    receiveTimeout: 5000, // 接收超时时间
  );

  runApp(MyApp());
}

3. 发起 GET 请求

你可以使用 HttpClient 来发起 GET 请求。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Kit Http Example'),
        ),
        body: Center(
          child: FutureBuilder(
            future: HttpClient.get('/posts/1'), // 发起 GET 请求
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                var data = snapshot.data;
                return Text('Response: ${data['title']}');
              }
            },
          ),
        ),
      ),
    );
  }
}

4. 发起 POST 请求

你也可以使用 HttpClient 来发起 POST 请求。

Future<void> createPost() async {
  var response = await HttpClient.post(
    '/posts',
    data: {
      'title': 'foo',
      'body': 'bar',
      'userId': 1,
    },
  );
  print('Response: $response');
}

5. 处理错误

flutter_kit_http 会自动处理一些常见的网络错误，但你也可以手动捕获和处理错误。

try {
  var response = await HttpClient.get('/posts/1');
  print('Response: $response');
} catch (e) {
  print('Error: $e');
}

6. 添加请求头

你可以在请求中添加自定义的请求头。

var response = await HttpClient.get(
  '/posts/1',
  headers: {
    'Authorization': 'Bearer your_token_here',
  },
);

7. 其他 HTTP 方法

flutter_kit_http 还支持其他 HTTP 方法，如 PUT、DELETE、PATCH 等。

var response = await HttpClient.put(
  '/posts/1',
  data: {
    'title': 'updated title',
  },
);

var response = await HttpClient.delete('/posts/1');

8. 拦截器

flutter_kit_http 支持拦截器，你可以在请求发送前或响应接收后进行一些操作。

HttpClient.addInterceptor(
  onRequest: (options) {
    print('Request: ${options.url}');
    return options;
  },
  onResponse: (response) {
    print('Response: $response');
    return response;
  },
  onError: (error) {
    print('Error: $error');
    return error;
  },
);

9. 取消请求

你可以使用 CancelToken 来取消请求。

var cancelToken = CancelToken();

HttpClient.get('/posts/1', cancelToken: cancelToken).catchError((e) {
  if (e is DioError && e.type == DioErrorType.cancel) {
    print('Request canceled');
  }
});

// 取消请求
cancelToken.cancel();

10. 文件上传

flutter_kit_http 也支持文件上传。

var response = await HttpClient.upload(
  '/upload',
  files: {
    'file': await MultipartFile.fromFile('path/to/file'),
  },
);