Flutter网络请求插件yjy_dio_5_4_0的使用

在Flutter开发中，网络请求是一个非常常见的需求。本文将详细介绍如何使用yjy_dio_5_4_0插件来完成网络请求，并通过完整的示例代码帮助您快速上手。

安装插件

首先，在您的pubspec.yaml文件中添加dio依赖：

dependencies:
  dio: ^5.4.0

然后运行以下命令以安装依赖：

flutter pub get

基本用法

GET 请求

以下是一个简单的GET请求示例：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dio GET Example")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                final dio = Dio(); // 创建 Dio 实例
                final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
                print(response.data); // 打印返回数据
              } catch (e) {
                print('Error: $e'); // 捕获并打印错误
              }
            },
            child: Text("发起GET请求"),
          ),
        ),
      ),
    );
  }
}

POST 请求

以下是一个POST请求示例：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dio POST Example")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                final dio = Dio(); // 创建 Dio 实例
                final response = await dio.post(
                  'https://jsonplaceholder.typicode.com/posts',
                  data: {"title": "foo", "body": "bar", "userId": 1},
                );
                print(response.data); // 打印返回数据
              } catch (e) {
                print('Error: $e'); // 捕获并打印错误
              }
            },
            child: Text("发起POST请求"),
          ),
        ),
      ),
    );
  }
}

使用FormData上传文件

FormData可以用来上传表单数据或文件。以下是一个上传单个文件的示例：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dio 文件上传")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                final dio = Dio(); // 创建 Dio 实例
                final formData = FormData.fromMap({
                  'file': await MultipartFile.fromFile("./example.txt",
                      filename: "example.txt"),
                });

                final response = await dio.post(
                  'https://example.com/upload',
                  data: formData,
                );
                print(response.data); // 打印返回数据
              } catch (e) {
                print('Error: $e'); // 捕获并打印错误
              }
            },
            child: Text("上传文件"),
          ),
        ),
      ),
    );
  }
}

添加拦截器

拦截器可以用于修改请求、响应或处理错误。以下是一个简单的日志拦截器示例：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:developer' as developer;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dio 拦截器示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final dio = Dio(); // 创建 Dio 实例

              // 添加日志拦截器
              dio.interceptors.add(
                LogInterceptor(
                  request: true,
                  responseBody: true,
                  responseHeader: false,
                  error: true,
                  requestHeader: false,
                ),
              );

              try {
                final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
                print(response.data); // 打印返回数据
              } catch (e) {
                developer.log('Error: $e'); // 打印错误日志
              }
            },
            child: Text("测试拦截器"),
          ),
        ),
      ),
    );
  }
}

自定义配置

可以通过设置BaseOptions来统一管理所有请求的默认配置：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dio 配置示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final options = BaseOptions(
                baseUrl: 'https://jsonplaceholder.typicode.com',
                connectTimeout: Duration(seconds: 5),
                receiveTimeout: Duration(seconds: 3),
              );

              final dio = Dio(options); // 使用自定义配置创建 Dio 实例

              try {
                final response = await dio.get('/posts/1');
                print(response.data); // 打印返回数据
              } catch (e) {
                print('Error: $e'); // 捕获并打印错误
              }
            },
            child: Text("使用自定义配置"),
          ),
        ),
      ),
    );
  }
}

处理错误

当请求失败时，Dio会抛出DioException异常。您可以捕获该异常并处理错误：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dio 错误处理")),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final dio = Dio();

              try {
                final response = await dio.get('https://jsonplaceholder.typicode.com/invalid-url');
                print(response.data); // 这行代码不会被执行
              } on DioException catch (e) {
                if (e.response != null) {
                  print('Error Code: ${e.response!.statusCode}');
                  print('Error Message: ${e.response!.statusMessage}');
                } else {
                  print('Error Message: ${e.message}');
                }
              }
            },
            child: Text("测试错误处理"),
          ),
        ),
      ),
    );
  }
}