Day09 - Flutter -网络请求的封装

简介: Day09 - Flutter -网络请求的封装

概述


  • HttpClient
  • http库
  • dio库(重点)


一、HttpClient



  • 1.1、HttpClient 简介HttpClient是dart自带的请求类,在io包中,实现了基本的网络请求相关的操作。网络调用通常遵循如下步骤:
  • 创建 client.
  • 构造 Uri.
  • 发起请求, 等待请求,同时您也可以配置请求headers、 body。
  • 关闭请求, 等待响应.
  • 解码响应的内容.
  • 1.2、网络请求实例


void requestNetwork() async {
   // 1.创建HttpClient对象
   final httpClient = HttpClient();
   // 2.构建请求的uri
   final uri = Uri.parse("http://rest.apizza.net/mock/3bb78bf66bbd102a95221370ba9ddc2f/test");
   // 3.构建请求
   final request = await httpClient.getUrl(uri);
   // 4.发送请求,必须
   final response = await request.close();
   if (response.statusCode == HttpStatus.ok) {
       print(await response.transform(utf8.decoder).join());
   } else {
       print(response.statusCode);
   }
}
  • 打印结果


flutter: {"success":"请求数据成功"}


  • 提示
  • 其实HttpClient也可以发送post相关的请求
  • HttpClient虽然可以发送正常的网络请求,但是会暴露过多的细节:
  • 比如需要主动关闭request请求,拿到数据后也需要手动的进行字符串解码
    在开发中,我们一般很多直接面向HttpClient进行网络请求,而是使用一些库来完成。


二、http库


  • 2.1、http库,进入链接:pub.dev,搜索 http
    http 是 Dart 官方提供的另一个网络请求类,相比于 HttpClient,易用性提升了不少。但是,没有默认集成到Dart的SDK中,所以我们需要先在pubspec中依赖它:



image.png

dependencies:
   http: ^0.12.1
  • 执行 pub get
    在使用的文件里面导入头文件,并且使用即可


import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
       return MaterialApp(
          // 启动要显示的界面
          home: HomeContent(),
       );
   }
}
class HomeContent extends StatefulWidget {
   @override
   _HomeContentState createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent> {
   void httpNetwork() async {
      // 1.创建Client
      final client = http.Client();
      // 2.构建uri
      final url = Uri.parse("http://rest.apizza.net/mock/3bb78bf66bbd102a95221370ba9ddc2f/test");
      // 3.发送请求
      final response = await client.get(url);
      // 4.获取结果
      if (response.statusCode == HttpStatus.ok) {
         print(response.body);
      } else {
         print(response.statusCode);
      }
   }
   @override
   void initState() {
     // TODO: implement initState
     super.initState();
     httpNetwork();
   }
   @override
   Widget build(BuildContext context) {
     return Container(
       color: Colors.white,
     );
   }
}
  • 打印结果


flutter: {"success":"请求数据成功"}


三、dio库



  • 3.1、 dio三方库简介
    官方提供的HttpClient和http都可以正常的发送网络请求,但是对于现代的应用程序开发来说,我们通常要求的东西会更多:比如拦截器、取消请求、文件上传/下载、超时设置等等;
    这个时候,我们可以使用一个在Flutter中非常流行的三方库:dio;
    官网有对dio进行解释:dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...
  • 3.2、使用dio三方库必然也需要先在pubspec中依赖它:


image.png


# 网络请求的依赖
dio: ^3.0.9
  • 基本的代码使用


import 'dart:io';
import 'package:dio/dio.dart';
void dioNetwork() async {
   // 1.创建dio网络请求对象
   final dio = Dio();
   // 2.发送网络请求
   final response = await dio.get('http://rest.apizza.net/mock/3bb78bf66bbd102a95221370ba9ddc2f/test');
   // 3.打印请求结果
   if (response.statusCode == HttpStatus.ok) {
      print(response.data);
   } else {
      print("请求失败:${response.statusCode}");
   }
}
  • 3.3、dio库的封装,一个配置文件:http_config.dart,一个dio的封装:http_request.dart
  • http_config.dart


class HttpConfig {
   // 基础的url
   static const String baseUrl = '';
   // 超时时间
   static const int timeout = 5000;
}
  • http_request.dart


import 'package:dio/dio.dart';
// 这个路径自己配
import 'package:flutterdemo/service/http_config.dart';
class HttpRequest {
    static final BaseOptions baseOptions = BaseOptions(baseUrl: HttpConfig.baseUrl, connectTimeout: HttpConfig.timeout);
    static final Dio dio = Dio(baseOptions);
    // 私有方法
    static Future<T> _request<T>(String url,{
             String method = 'get',
             Map<String, dynamic> params, Interceptor inter}) async {
        // 1.创建单独配置, 我么也可以设置 headers
        final options = Options(method: method, headers: {});
        // 全局拦截器
        // 创建默认的全局拦截器
        Interceptor dInter = InterceptorsWrapper(
           onRequest: (options) {
              print('请求拦截');
              return options;
           },
           onResponse: (response) {
              print('响应拦截');
              return response;
           },
           onError: (err) {
              print('错误拦截');
              return err;
           }
        );
        List<Interceptor> inters = [dInter];
        if (inter != null) {
           inters.add(inter);
        }
        // 统一添加到拦截器中
        dio.interceptors.addAll(inters);
        // 2.发送网络请求
        try {
           Response response = await dio.request(url, queryParameters: params, options: options);
           return response.data;
        } on DioError catch(e) {
           return Future.error(e);
        }
     }
     // get网络请求
    static Future<T> get<T>(String url,{
                            Map<String, dynamic> params, Interceptor inter}) async {
         return _request(url, method: 'get', params: params, inter: inter);
    }
    // post网络请求
    static Future<T> post<T>(String url,{
                             Map<String, dynamic> params, Interceptor inter}) async {
         return _request(url, method: 'post', params: params, inter: inter);
    }
  • 3.4、dio库的封装 代码使用:
  • get


HttpRequest.get('http://rest.apizza.net/mock/3bb78bf66bbd102a95221370ba9ddc2f/test', params: {'name': 'wc'}).then((value) {
     print('结果:$value');
}).catchError((error) {
     print('报错信息:$error');
});
  • post


HttpRequest.post('http://rest.apizza.net/mock/3bb78bf66bbd102a95221370ba9ddc2f/test', params: {'name': 'wc'}).then((value) {
     print('结果:$value');
}).catchError((error) {
     print('报错信息:$error');
});


提示: Future<T> get<T> 中的T代表泛型

我们在网络请求的时候,可以传入类型,如:HttpRequest<String>.get();那么返回的类型就是 String,如果不传类型默认dynamic 类型

目录
相关文章
|
8月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
338 1
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
安全 网络协议 Java
Java网络编程封装
Java网络编程封装原理旨在隐藏底层通信细节,提供简洁、安全的高层接口。通过简化开发、提高安全性和增强可维护性,封装使开发者能更高效地进行网络应用开发。常见的封装层次包括套接字层(如Socket和ServerSocket类),以及更高层次的HTTP请求封装(如RestTemplate)。示例代码展示了如何使用RestTemplate简化HTTP请求的发送与处理,确保代码清晰易维护。
|
XML JSON 前端开发
一文带你了解 Flutter dio封装
一文带你了解 Flutter dio封装
2206 1
|
存储 缓存 Dart
Flutter&鸿蒙next 封装 Dio 网络请求详解:登录身份验证与免登录缓存
本文详细介绍了如何在 Flutter 中使用 Dio 封装网络请求,实现用户登录身份验证及免登录缓存功能。首先在 `pubspec.yaml` 中添加 Dio 和 `shared_preferences` 依赖,然后创建 `NetworkService` 类封装 Dio 的功能,包括请求拦截、响应拦截、Token 存储和登录请求。最后,通过一个登录界面示例展示了如何在实际应用中使用 `NetworkService` 进行身份验证。希望本文能帮助你在 Flutter 中更好地处理网络请求和用户认证。
891 1
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
384 1
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
310 1
|
网络协议 Java 程序员
【网络】局域网LAN、广域网WAN、TCP/IP协议、封装和分用
【网络】局域网LAN、广域网WAN、TCP/IP协议、封装和分用
796 2
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
282 0
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装:提升开发效率与用户体验
在移动应用开发中,表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单,以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势,封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧,帮助开发者构建健壮且用户友好的应用。
326 0