当前位置：首页 > news >正文

Flutter 网络请求

news 2025/7/22 23:37:11

在Flutter 中常见的网络请求方式有三种：HttpClient、http库、dio库；

本文简单介绍使用dio库使用。
选择dio库的原因：

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

1、使用dio 三方库必然需要先在pubspec中依赖它：

dio: ^3.0.1

注：格式对齐

2、创建HttpConfig 基础配置

// 网络请求配置文件
class HTTPConfig {static const baseURL  = "http://127.0.0.0:8000";static const timeout = 5000;
}

3、创建基础网络请求

import 'package:dio/dio.dart';
import 'package:list/douban/Common/custom_log.dart';
import 'package:list/douban/Common/http_config.dart';// ignore: camel_case_types
class Http_request {// 创建网络请求实例对象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", required Map<String, dynamic> params}) async {// 1 请求的单独配置final Options options = Options(method: method);// 2 添加第一个拦截器// ignore: unused_local_variableInterceptor dInter = InterceptorsWrapper(onRequest: (RequestOptions options, RequestInterceptorHandler handler) {// 1.在进行任何网络请求的时候, 可以添加一个loading显示// 2.很多页面的访问必须要求携带Token,那么就可以在这里判断是有Token// 3.对参数进行一些处理,比如序列化处理等Logs("请求之前", StackTrace.current);handler.next(options);}, onResponse: (Response response, ResponseInterceptorHandler handler) {Logs("相应之前", StackTrace.current);handler.next(response);}, onError: (DioError error, ErrorInterceptorHandler handler) {Logs("错误之前", StackTrace.current);handler.next(error);});// 3 发送网络请求try {Response response =await dio.request<T>(url, queryParameters: params, options: options);return response.data;} on DioError catch (e) {return Future.error(e);}}
}

4、根据功能将网络请求进行封装处理


import 'package:list/douban/Common/custom_log.dart';
import 'package:list/douban/Common/http_request.dart';class HomeRequest {Future<List> getMovieTopList(int start, int count) async{// 1 拼接urlfinal url = "https://douban.uieee.com/v2/movie/top250?start=$start&count=$count";Logs("发送请求$url", StackTrace.current);// 2 发送请求final result = await Http_request.request(url, params: {"":""});// 转成模型List movies = [];final subjects = result["subjects"];Logs(subjects, StackTrace.current);// 这里遍历 subjects 进行json解析以及将数据 bean添加到数组并返回// 返回数据return movies;}
}