Flutter开发之——getX-Connect网络请求(10)

发表于 2022-05-09 分类于开发， F-跨平台， Flutter 阅读时长 ≈ 2 分钟

一概述

GetX提供一种简便的网络请求方式：GetConnect
该请求方式支持：Rest API的GET/POST/PUT/DELETE/SOCKET及websocket通信
支持自定义配置：请求拦截，响应拦截，Authen认证等

二 GetConnect快速入门

2.1 添加getX依赖

1 2	dependencies: get:

2.2 定义Provider继承GetConnect，并实现网络方法

class UserProvider extends GetConnect {
  //Get请求
  Future<Response> getUser(int id) => get('http://youapi/users/$id');
}

三 getConnect示例

3.1 Provider

BaseProvider基类(处理请求拦截及相应拦截)

class BaseProvider extends GetConnect {
  @override
  void onInit() {
    httpClient.baseUrl = SERVER_API_URL;

    // 请求拦截
    httpClient.addRequestModifier<void>((request) {
      request.headers['Authorization'] = '12345678';
      return request;
    });

    // 响应拦截
    httpClient.addResponseModifier((request, response) {
      return response;
    });
  }
}

说明：

此处定义Provider基类，处理请求拦截和相应拦截
SERVER_API_URL为服务器host主机地址

HomeProvider(首页网络请求)

1
2
3

class HomeProvider extends BaseProvider {
  Future<Response> getArticle(int id) => get('/article/list/$id/json');
}

说明：

get前面拼接了httpClient.baseUrl

3.2 网络请求(HomeController)

class HomeController extends GetxController with StateMixin<Article>{

  HomeProvider userProvider=Get.find();

  void getArticle() async {
    //刚开始显示加载中。。
    change(null,status: RxStatus.loading());
    //执行网络请求
    Response response= await userProvider.getArticle(0);
    //请求出错时
    if(response.hasError){
      change(null,status: RxStatus.error('Error'));
    }else{
      //请求成功时，显示数据
      Article article= Article.fromJson(response.body);
      change(article,status: RxStatus.success());
    }
  }
  @override
  void onInit() {
    super.onInit();
    //初始化时请求数据
    getArticle();
  }
}

说明：

此处使用了StateMixin，请求前显示加载中，根据请求情况显示成功和失败结果
Article：为数据类(自定义解析，不在列出，请查看源码)
onInit：在程序初始化时，执行getArticle方法，请求网络数据
使用change方法执行状态改变

3.3 数据显示

class HomeGetWidget extends GetView<HomeController>{
  @override
  Widget build(BuildContext context) {
    return _buildMixState();
  }
Widget _buildMixState(){
    return controller.obx(
              (data) => ListView.separated(
                itemCount: data!.data!.datas.length,
                separatorBuilder: (context, index) {return Divider(height: 10, color: Colors.grey,);},
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: [
                      Text(data.data!.datas[index].author),
                      Text(data.data!.datas[index].title),
                      Text(data.data!.datas[index].niceShareDate)
                    ],
                  );
                },
              ),
          //onLoading: const CupertinoActivityIndicator(radius: 10), //加载中，默认是个Center(child:CircularProgressIndicator())
          onEmpty: const Text('No data found'), //空数据显示
          onError: (error) => Text(error!), //出错界面显示
        );
  }
}

说明：

通过GetView绑定Controller后，可以方便获取到controller
通过controller.obx设置数据改变

3.4 效果图

加载中	成功	失败

四参考

Github-getX-GetConnect官方文档
CSDN-参考示例

0%