Flutter网络请求插件fn_http的使用

Flutter网络请求插件fn_http的使用

fn_http 是一个用于简化项目中的HTTP请求封装。它通过回调函数来处理响应和错误，并且旨在减少项目的样板代码。

常规设置

abstract class FnHttpSetup {
  // 初始化FnHttp实例
  static late final FnHttpInstance instance;

  // 初始化方法
  static Future<void> init() async {
    instance = const FnHttpInstance(
      instanceLogName: '项目名称', // 项目名称
      defaultAssessor: _defaultAssessor, // 默认评估器
      defaultOnFailedConnection: _defaultOnFailedConnection, // 默认连接失败处理器
      defaultOnFailure: _defaultOnFailure, // 默认失败处理器
      defaultRequestModifier: _defaultRequestModifier, // 默认请求修改器
    );
  }

  // 默认评估器
  static Future<bool> _defaultAssessor(FnHttp fnHttp) async {
    // 检查响应是否符合预期
    return fnHttp.response?.statusCode == 200 && 
           fnHttp.jsonDecodedResponse?['status'] == 'success';
  }

  // 连接失败时的默认处理
  static Future<void> _defaultOnFailedConnection(FnHttp fnHttp) async {
    // 显示问题给用户
    showError(msg: '请检查您的互联网连接');
  }

  // 失败时的默认处理
  static Future<void> _defaultOnFailure(FnHttp fnHttp) async {
    if (fnHttp.jsonDecodedResponse?['message'] != null) {
      // 显示来自响应体的错误消息
      showError(msg: fnHttp.jsonDecodedResponse?['message']);
    } else {
      // 显示未知错误状态码
      showUnexpectedError('${fnHttp.response?.statusCode ?? 'UNKNOWN'}');
    }

    // 可以执行其他操作... 例如报告给Crashlytics
  }

  // 默认请求修改器
  static Future<void> _defaultRequestModifier(FnHttp fnHttp) async {
    // 向请求体中注入一些通用信息，例如令牌
    fnHttp.injectToBody({'token': '令牌'});

    // 向请求头中注入一些通用信息，例如客户端标识符
    fnHttp.injectToHeader({'client': '客户端A'});
  }
}

常用示例

abstract class AuthApi {
  // 登录API
  static FnHttp login({
    required String username,
    required String password,
  }) {
    return FnHttp(
      instance: FnHttpSetup.instance, // 使用初始化的FnHttp实例
      method: 'POST', // 请求方法为POST
      uri: 'https://fn.http/login', // 请求URL
      bodyFields: { // 请求体参数
        'username': username,
        'password': password,
      },
    );
  }
}

// 调用登录API
AuthApi.login(
  username: usernameController.text, // 用户名
  password: passwordController.text, // 密码
).send(
  onRequestFinish: (fnHttp) async {
    // 请求完成后的处理，无论成功或失败
    // ...
  },
  onSuccess: (fnHttp) async {
    // 请求被评估器判定为成功的处理
    final response = fnHttp.jsonDecodedResponse['data'];
    // ...
  },
  onFailure: (fnHttp) async {
    // 请求被评估器判定为失败的处理
    if (fnHttp.jsonDecodedResponse['code'] == 'invalid_username_password') {
      // 显示无效密码
      return;
    }

    // 可以传递到默认处理器
    fnHttp.instance.defaultOnFailure!(fnHttp);
  },
);

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

1 回复

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


当然，以下是关于如何在Flutter中使用fn_http插件进行网络请求的示例代码。fn_http是一个轻量级的HTTP请求库，它提供了简单且强大的API来处理网络请求。

首先，确保你已经在pubspec.yaml文件中添加了fn_http依赖：

dependencies:
  flutter:
    sdk: flutter
  fn_http: ^最新版本号  # 请替换为最新版本号

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

接下来是一个完整的示例，展示了如何使用fn_http进行GET和POST请求：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('fn_http 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => fetchData(),
                child: Text('GET 请求'),
              ),
              ElevatedButton(
                onPressed: () => postData(),
                child: Text('POST 请求'),
              ),
              Text(
                '结果: \n$result',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }

  late String result = '';

  void fetchData() async {
    try {
      // 创建HTTP客户端实例
      final http = Http();

      // 发起GET请求
      final response = await http.get(
        url: 'https://jsonplaceholder.typicode.com/posts/1',
      );

      // 处理响应
      if (response.isOk) {
        result = response.data.toString();
      } else {
        result = 'GET 请求失败: ${response.status}';
      }
    } catch (e) {
      result = 'GET 请求异常: $e';
    }
  }

  void postData() async {
    try {
      // 创建HTTP客户端实例
      final http = Http();

      // 创建请求体
      final body = {
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      };

      // 发起POST请求
      final response = await http.post(
        url: 'https://jsonplaceholder.typicode.com/posts',
        data: body,
      );

      // 处理响应
      if (response.isOk) {
        result = response.data.toString();
      } else {
        result = 'POST 请求失败: ${response.status}';
      }
    } catch (e) {
      result = 'POST 请求异常: $e';
    }
  }
}

解释

  1. 依赖安装：确保在pubspec.yaml中添加了fn_http依赖，并运行flutter pub get。

  2. 创建HTTP客户端：通过final http = Http();创建fn_http的HTTP客户端实例。

  3. GET请求：使用http.get方法发起GET请求，并处理响应。如果请求成功（response.isOk为true），则解析并显示响应数据；否则，显示错误信息。

  4. POST请求：使用http.post方法发起POST请求，并传递请求体（data）。同样，处理响应并显示结果或错误信息。

  5. UI部分：使用Flutter的MaterialApp和相关的布局组件（如Column、ElevatedButton和Text）来创建用户界面，并绑定按钮点击事件到网络请求函数。

这个示例展示了如何使用fn_http进行基本的网络请求。根据实际需求，你可能需要调整URL、请求头和请求体等参数。

回到顶部