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

一 概述

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

二 GetConnect快速入门

2.1 添加getX依赖

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(首页网络请求)
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 效果图

加载中成功失败

四 参考

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter网络请求dio封装是一种常用的网络请求框架,它可以帮助我们快速地进行网络请求,同时也可以提高我们的开发效率。在使用dio进行网络请求时,我们可以通过封装来简化代码,提高代码的可读性和可维护性。常见的封装方式有: 1. 封装请求方法:将网络请求的方法封装成一个函数,可以传入参数,方便调用。例如: ``` Future<Response> post(String url, Map<String, dynamic> data) async { try { Response response = await Dio().post(url, data: data); return response; } catch (e) { throw e; } } ``` 2. 封装请求拦截器:可以在请求前或请求后进行一些操作,例如添加请求头、打印请求日志等。例如: ``` class HttpUtil { static Dio dio = Dio(); static Future<Response> get(String url, {Map<String, dynamic> params}) async { dio.interceptors.add(InterceptorsWrapper( onRequest: (options, handler) { // 添加请求头 options.headers['Authorization'] = 'Bearer token'; return handler.next(options); }, onResponse: (response, handler) { // 打印请求日志 print('response: ${response.data}'); return handler.next(response); }, )); try { Response response = await dio.get(url, queryParameters: params); return response; } catch (e) { throw e; } } } ``` 3. 封装错误处理:可以统一处理网络请求的错误,例如网络异常、请求超时等。例如: ``` class HttpUtil { static Dio dio = Dio(); static Future<Response> get(String url, {Map<String, dynamic> params}) async { try { Response response = await dio.get(url, queryParameters: params); return response; } on DioError catch (e) { if (e.type == DioErrorType.CONNECT_TIMEOUT) { throw '请求超时'; } else if (e.type == DioErrorType.RECEIVE_TIMEOUT) { throw '响应超时'; } else if (e.type == DioErrorType.RESPONSE) { throw '请求异常,状态码:${e.response.statusCode}'; } else if (e.type == DioErrorType.CANCEL) { throw '请求取消'; } else { throw '网络异常'; } } } } ``` 通过封装,我们可以让代码更加简洁、易读、易维护,同时也可以提高开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值