Flutter网络请求基础插件http_base_client的使用

Flutter网络请求基础插件http_base_client的使用

A minimalistic http client.

特性

此包简化了HTTP请求,使其非常简单易用。

使用方法

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '测试',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter 示例首页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: SingleChildScrollView(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(
                  height: 15,
                ),
                const Text(
                  '按下按钮获取数据',
                ),
                const SizedBox(
                  height: 25,
                ),
                Text(
                  _data,
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _fetchData,
        tooltip: '获取数据',
        child: const Icon(Icons.download),
      ),
    );
  }

  Future _fetchData() async {
    /// 检查是否有互联网连接
    bool check = await HttpBaseClient.checkInternetConnection;

    if (check) {
      /// 发起GET请求
      var res = await HttpBaseClient.get(
        Uri.parse("https://jsonplaceholder.typicode.com/users"),
      );

      if (res.body.isNotEmpty) {
        setState(() {
          _data = ObjectConverter.jsonEncode(
            ObjectConverter.jsonDecode(res.body),
          );
        });
      }

      await Future.delayed(const Duration(seconds: 3));

      /// 发起POST请求
      Map<String, dynamic> requestBody = {
        "title": "foo",
        "body": "bar",
        "userId": 1,
      };

      var res2 = await HttpBaseClient.post(
        Uri.parse("https://jsonplaceholder.typicode.com/posts"),
        requestBody: ObjectConverter.jsonEncode(requestBody),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      );

      if (res2.body.isNotEmpty) {
        setState(() {
          _data = ObjectConverter.jsonEncode(
            ObjectConverter.jsonDecode(res2.body),
          );
        });
      }
    }
  }
}

更多关于Flutter网络请求基础插件http_base_client的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络请求基础插件http_base_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


http_base_client 是一个基于 Dart 的 Flutter 网络请求插件,它是对 http 包的封装,提供了更加简洁和易用的 API 来进行网络请求。以下是使用 http_base_client 插件进行网络请求的基本步骤和示例代码。

1. 安装依赖

首先,你需要在 pubspec.yaml 文件中添加 http_base_client 依赖:

dependencies:
  flutter:
    sdk: flutter
  http_base_client: ^0.0.1  # 请确保使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 http_base_client 包:

import 'package:http_base_client/http_base_client.dart';

3. 创建客户端实例

你可以创建一个 HttpBaseClient 的实例来进行网络请求:

final client = HttpBaseClient();

4. 发起 GET 请求

使用 get 方法来发起一个 GET 请求:

void fetchData() async {
  final response = await client.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // 成功获取数据
    print('Response data: ${response.body}');
  } else {
    // 请求失败
    print('Request failed with status: ${response.statusCode}.');
  }
}

5. 发起 POST 请求

使用 post 方法来发起一个 POST 请求:

void postData() async {
  final response = await client.post(
    'https://jsonplaceholder.typicode.com/posts',
    body: {
      'title': 'foo',
      'body': 'bar',
      'userId': 1,
    },
  );

  if (response.statusCode == 201) {
    // POST 请求成功
    print('Response data: ${response.body}');
  } else {
    // 请求失败
    print('Request failed with status: ${response.statusCode}.');
  }
}

6. 发起 PUT 请求

使用 put 方法来发起一个 PUT 请求:

void updateData() async {
  final response = await client.put(
    'https://jsonplaceholder.typicode.com/posts/1',
    body: {
      'id': 1,
      'title': 'foo',
      'body': 'bar',
      'userId': 1,
    },
  );

  if (response.statusCode == 200) {
    // PUT 请求成功
    print('Response data: ${response.body}');
  } else {
    // 请求失败
    print('Request failed with status: ${response.statusCode}.');
  }
}

7. 发起 DELETE 请求

使用 delete 方法来发起一个 DELETE 请求:

void deleteData() async {
  final response = await client.delete('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // DELETE 请求成功
    print('Response data: ${response.body}');
  } else {
    // 请求失败
    print('Request failed with status: ${response.statusCode}.');
  }
}

8. 处理错误

你可以在请求过程中捕获和处理异常:

void fetchDataWithErrorHandling() async {
  try {
    final response = await client.get('https://jsonplaceholder.typicode.com/invalid-endpoint');

    if (response.statusCode == 200) {
      print('Response data: ${response.body}');
    } else {
      print('Request failed with status: ${response.statusCode}.');
    }
  } catch (e) {
    print('An error occurred: $e');
  }
}

9. 自定义请求头

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

void fetchDataWithCustomHeaders() async {
  final response = await client.get(
    'https://jsonplaceholder.typicode.com/posts/1',
    headers: {
      'Authorization': 'Bearer your_token_here',
      'Content-Type': 'application/json',
    },
  );

  if (response.statusCode == 200) {
    print('Response data: ${response.body}');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

10. 关闭客户端

当你不再需要使用客户端时,可以关闭它以释放资源:

void closeClient() {
  client.close();
}
回到顶部