美文网首页Flutter实战
Flutter实战-请求封装(一)

Flutter实战-请求封装(一)

作者: 蓝面书生IT | 来源:发表于2022-07-25 14:19 被阅读0次

    用了两年的flutter,有了一些心得,从今天开始陆续更新一些案例,不虚头巴脑,只求实战有用,以供学习或使用flutter的小伙伴参考,学习尚浅,如有不正确的地方还望各路大神指正,以免误人子弟,在此拜谢~(原创不易,转发请标注来源和作者)

    注意:无特殊说明,flutter版本为3.0+

    所有程序的开发,包括原生开发,web前端,小程序等都不可避免的做一件事情那就是封装与后台交互的请求,然后便于接收数据,那么我们今天就一步一步把flutter的封装写清楚。

    一.模块划分

    好的项目结构要模块划分清晰,包括api请求,举个例子

    比如base为基础api,包含登录,注册,设置等接口。bi为报表统计接口,以此类推,商品,订单等等。

    二.请求封装

    我们先看封装需求
    1.将请求url定义在头部,方便查找和修改

    2.封装请求方法HttpUtils(这个我们在新的篇章单独说)

    3.定义请求和返回的实体类。一般的接口返回有几种情况

    1. 返回是否成功等信息,结果可能是String,bool
    2. 返回一个实体类,比如用户信息UserDo
    3. 返回实体类的列表,List<Object>, 入返回登录用户的权限列表等

    我们看一下包括三种类型的简单示例:

    class UserApi {
    /// 查询登录用户
    static const String _getUser = "/base/login/user";

    /// 登录
    static const String _login ="/base/login";

    //查询登录权限

    static const _selectPermission = "/base/selectPermission";

    static Future<UserDo> getUser() async {
    var res = await HttpUtils.get(_getUser, baseUrl: Config.BASE_API_URL);
    return UserDo.fromJson(res);
    }

    static Future<String> login(dynamic param) async {
    var res = await HttpUtils.post(_login, data: param, baseUrl: Config.BASE_API_URL, showLoading: showLoad);
    return res;
    }

    static Future<List<Permission>> selectPermission(List<String> permissions) async {
    var res = await HttpUtils.post(
    _selectPermission,
    data: permissions,
    baseUrl: Config.BASE_API_URL,
    );
    return res.map<Permission>((e) => Permission.fromJson(e)).toList();
    }

    三.Json处理:FlutterJsonBeanFactory

    Dart语言在Json转换的方面框架不够成熟,也没有类似Java等语言的反射机制,如果手动处理返回结果的转换,将是非常麻烦的一件事,所幸大神还是非常多的,这里推荐一个转换工具FlutterJsonBeanFactory,可以快速生成,并可以使用上文例子中的转换方法:fromJson和toJson

    安装方法:

    Settings/Preferences > Plugins > Marketplace > Search for "FlutterJsonBeanFactory" > Install Plugin

    目前使用的是4.4.5版本。感谢作者的一路升级,也见证了插件从if 判断,到Map的转化,查找效率更高。

    使用:

    将PostMan的返回结果,直接复制在工具的创建窗口,就会自动根据类型

    生成实体

    当然也支持实体类型嵌套。


    结语:

    感兴趣的读者可以自行研究源码。

    附插件地址:https://plugins.jetbrains.com/plugin/11415-flutterjsonbeanfactory-only-null-safety-

    相关文章

      网友评论

        本文标题:Flutter实战-请求封装(一)

        本文链接:https://www.haomeiwen.com/subject/qmyoirtx.html