Flutter网络请求插件dio_client的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter网络请求插件dio_client的使用

特性

此包目前只有四个方法,分别是:

  1. getRequest
  2. postRequest
  3. updateRequest
  4. deleteRequest

开始使用

请先初始化 DioClient 对象并传入您的 baseUrl,然后开始调用这些方法。

使用示例

以下是一个完整的示例代码,展示如何使用 dio_client 包进行网络请求:

/// 定义基础URL
const baseUrl = 'https://jsonplaceholder.typicode.com';

/// 初始化 DioClient 对象
final dioClient = DioClient(baseUrl: baseUrl);

try {
    /// 调用 getRequest 方法获取数据
    final response = await dioClient.getRequest(path: '/posts');

    /// 检查响应状态码是否为200
    if (response.statusCode == 200) {
        debugPrint(response.data); // 打印返回的数据
    } else {
        debugPrint(response.statusMessage); // 打印状态信息
    }
} on Exception catch (e) {
    debugPrint('Error: $e'); // 打印错误信息
}

完整示例代码(包含UI部分)

以下是一个完整的 Flutter 示例应用,展示如何结合 dio_client 包进行网络请求,并在界面上显示结果:

import 'package:flutter/material.dart';

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

/// 示例应用
class MyApp extends StatelessWidget {
  /// 创建一个新的 MyApp 实例
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dio Client 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Dio Client 示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _responseData = ''; // 用于存储网络请求返回的数据
  bool _isLoading = false; // 是否正在加载数据

  /// 发起网络请求
  Future<void> fetchData() async {
    setState(() {
      _isLoading = true; // 设置加载状态为true
    });

    try {
      /// 初始化 DioClient 对象
      final dioClient = DioClient(baseUrl: 'https://jsonplaceholder.typicode.com');

      /// 调用 getRequest 方法获取数据
      final response = await dioClient.getRequest(path: '/posts');

      /// 检查响应状态码是否为200
      if (response.statusCode == 200) {
        setState(() {
          _responseData = response.data.toString(); // 存储返回的数据
        });
      } else {
        setState(() {
          _responseData = response.statusMessage ?? '请求失败'; // 存储状态信息
        });
      }
    } catch (e) {
      setState(() {
        _responseData = 'Error: $e'; // 捕获异常并显示错误信息
      });
    } finally {
      setState(() {
        _isLoading = false; // 请求完成后设置加载状态为false
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: fetchData,
              child: Text(_isLoading ? '加载中...' : '发起请求'),
            ),
            SizedBox(height: 20),
            Text(
              _responseData,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


dio 是 Flutter 中一个非常流行的网络请求库,它支持多种功能,如拦截器、请求取消、文件上传/下载、超时设置等。下面是如何在 Flutter 项目中使用 dio 进行网络请求的基本步骤。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 dio 依赖:

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0  # 请根据最新版本号进行更新

然后运行 flutter pub get 来安装依赖。

2. 创建 Dio 实例

在你的 Dart 文件中,导入 dio 并创建一个 Dio 实例:

import 'package:dio/dio.dart';

final dio = Dio();

3. 发起 GET 请求

使用 dio.get 方法发起一个 GET 请求:

void fetchData() async {
  try {
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

4. 发起 POST 请求

使用 dio.post 方法发起一个 POST 请求:

void postData() async {
  try {
    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');
  }
}

5. 设置请求头

你可以通过 options 参数来设置请求头:

void fetchDataWithHeaders() async {
  try {
    final response = await dio.get(
      'https://jsonplaceholder.typicode.com/posts/1',
      options: Options(headers: {
        'Authorization': 'Bearer your_token_here',
      }),
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

6. 拦截器

dio 支持拦截器,你可以在请求发送前或响应返回后进行一些操作:

dio.interceptors.add(InterceptorsWrapper(
  onRequest: (options, handler) {
    // 在请求发送前做一些操作
    print('Request: ${options.uri}');
    return handler.next(options);
  },
  onResponse: (response, handler) {
    // 在响应返回后做一些操作
    print('Response: ${response.data}');
    return handler.next(response);
  },
  onError: (DioError e, handler) {
    // 在请求出错时做一些操作
    print('Error: $e');
    return handler.next(e);
  },
));

7. 文件上传

使用 dio 上传文件:

void uploadFile() async {
  try {
    final formData = FormData.fromMap({
      'file': await MultipartFile.fromFile('path/to/file.txt', filename: 'file.txt'),
    });
    final response = await dio.post(
      'https://example.com/upload',
      data: formData,
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

8. 文件下载

使用 dio 下载文件:

void downloadFile() async {
  try {
    final response = await dio.download(
      'https://example.com/file.txt',
      'path/to/save/file.txt',
    );
    print('File downloaded');
  } catch (e) {
    print('Error: $e');
  }
}

9. 取消请求

你可以使用 CancelToken 来取消请求:

void fetchDataWithCancel() async {
  final cancelToken = CancelToken();

  try {
    final response = await dio.get(
      'https://jsonplaceholder.typicode.com/posts/1',
      cancelToken: cancelToken,
    );
    print(response.data);
  } catch (e) {
    if (CancelToken.isCancel(e)) {
      print('Request canceled');
    } else {
      print('Error: $e');
    }
  }

  // 取消请求
  cancelToken.cancel();
}

10. 设置超时

你可以通过 options 参数设置请求超时时间:

void fetchDataWithTimeout() async {
  try {
    final response = await dio.get(
      'https://jsonplaceholder.typicode.com/posts/1',
      options: Options(
        sendTimeout: Duration(seconds: 5),
        receiveTimeout: Duration(seconds: 5),
      ),
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!