Flutter Dio网络请求库实战

在使用Flutter Dio进行网络请求时遇到几个问题:

  1. Dio如何设置统一的请求头?比如需要在每个请求自动添加token,而不必每次都手动设置。
  2. 处理网络请求超时的最佳方式是什么?目前超时后直接报错,能否统一处理并自动重试?
  3. 如何拦截Dio的请求和响应?比如想在请求前打印日志,或者在收到响应后统一处理错误码。
  4. 文件上传进度监听具体怎么实现?官方文档的例子不太清晰,能否提供一个完整示例?
  5. Dio的CancelToken怎么正确使用?取消请求时容易导致内存泄漏,有没有推荐的解决方案?
3 回复

Dio 是 Flutter 中非常流行的网络请求库,它功能强大且易于使用。以下是一个简单的实战示例:

  1. 添加依赖:在 pubspec.yaml 中添加 dio 依赖:

    dependencies:
      dio: ^5.2.2
    
  2. 发起GET请求

    import 'package:dio/dio.dart';
    
    void fetchData() async {
      try {
        Response response = await Dio().get('https://jsonplaceholder.typicode.com/posts');
        print(response.data);
      } catch (e) {
        print(e);
      }
    }
    
  3. 发起POST请求

    void postData() async {
      try {
        var data = {'title': 'foo', 'body': 'bar', 'userId': 1};
        Response response = await Dio().post('https://jsonplaceholder.typicode.com/posts', data: data);
        print(response.data);
      } catch (e) {
        print(e);
      }
    }
    
  4. 设置拦截器:可以用来添加请求头或处理错误。

    Dio dio = Dio();
    dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        options.headers['Authorization'] = 'Bearer YOUR_TOKEN';
        return handler.next(options);
      },
      onError: (error, handler) {
        print(error.response?.data);
        return handler.next(error);
      },
    ));
    
  5. 处理响应:使用 response.data 获取返回的数据。

通过这些步骤,你可以轻松地在 Flutter 项目中使用 Dio 进行网络请求。记得处理异常和错误以确保应用的健壮性。

更多关于Flutter Dio网络请求库实战的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


使用Dio进行网络请求非常简单。首先添加依赖dio: ^5.0.0到pubspec.yaml中。

import 'package:dio/dio.dart';

void main() async {
  var dio = Dio();
  
  // 设置基础URL
  dio.options.baseUrl = "https://jsonplaceholder.typicode.com/";

  try {
    Response response;
    
    // 发送GET请求
    response = await dio.get("posts/1");
    print(response.data);

    // 发送POST请求
    response = await dio.post("posts", data: {"title": "foo", "body": "bar", "userId": 1});
    print(response.data);
    
    // 添加拦截器
    dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        print("请求前");
        return handler.next(options); // 必须调用此方法继续后续操作
      },
      onResponse: (response, handler) {
        print("响应后");
        return handler.next(response);
      },
    ));
  } catch (e) {
    print(e);
  }
}

Dio还支持请求取消、设置超时时间、发送 FormData 等功能,能满足大部分网络请求需求。记得处理异常,特别是网络错误和服务器错误。

Flutter Dio网络请求库实战指南

Dio是Flutter中一个强大的HTTP网络请求库,支持拦截器、全局配置、FormData、请求取消、文件下载/上传等功能。

基本使用

首先添加依赖:

dependencies:
  dio: ^5.0.0

1. 创建Dio实例

import 'package:dio/dio.dart';

final dio = Dio();

2. 发起GET请求

try {
  Response response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
  print(response.data);
} catch (e) {
  print(e);
}

3. 发起POST请求

try {
  Response response = await dio.post(
    'https://jsonplaceholder.typicode.com/posts',
    data: {'title': 'foo', 'body': 'bar', 'userId': 1},
  );
  print(response.data);
} catch (e) {
  print(e);
}

高级功能

1. 全局配置

dio.options.baseUrl = 'https://api.example.com';
dio.options.connectTimeout = Duration(seconds: 5);
dio.options.receiveTimeout = Duration(seconds: 3);

2. 拦截器

dio.interceptors.add(
  InterceptorsWrapper(
    onRequest: (options, handler) {
      // 添加请求头
      options.headers['Authorization'] = 'Bearer token';
      return handler.next(options);
    },
    onResponse: (response, handler) {
      // 处理响应数据
      return handler.next(response);
    },
    onError: (DioException e, handler) {
      // 错误处理
      return handler.next(e);
    },
  ),
);

3. 文件上传

FormData formData = FormData.fromMap({
  'file': await MultipartFile.fromFile('./example.txt'),
  'name': 'upload_file',
});

Response response = await dio.post('/upload', data: formData);

4. 文件下载

Response response = await dio.download(
  'https://www.example.com/file.zip',
  './example.zip',
  onReceiveProgress: (count, total) {
    print('进度: ${count / total * 100}%');
  },
);

最佳实践

  1. 封装Dio实例为一个单独的服务类
  2. 使用拦截器统一处理错误和授权
  3. 为不同的API创建不同的Dio实例
  4. 在请求时处理网络连接状态

希望这个指南能帮助你在Flutter项目中高效使用Dio进行网络请求!

回到顶部