Flutter网络请求插件dio_net的使用

Flutter网络请求插件dio_net的使用

在本教程中,我们将学习如何使用 dio_net 插件来处理 Flutter 应用中的网络请求。dio_net 基于流行的 dio 网络框架,提供了简单易用的 API 来进行 HTTP 请求。

安装 dio_net

首先,在你的 pubspec.yaml 文件中添加 dio_net 依赖:

dependencies:
  dio_net: ^x.x.x

然后运行 flutter pub get 来获取依赖。

初始化 DioNet

在使用 dio_net 进行网络请求之前,你需要初始化它。你可以在 main.dart 或任何其他合适的地方进行初始化。

import 'package:dio_net/dio_net.dart';

void main() {
  // 初始化 DioNet
  DioNet.init();
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dio Net Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

发送 GET 请求

接下来,我们来看一个简单的例子,演示如何发送一个 GET 请求并处理响应。

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

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _response = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dio Net Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_response),
            ElevatedButton(
              onPressed: () async {
                // 发送 GET 请求
                var response = await DioNet.get('https://jsonplaceholder.typicode.com/posts/1');
                
                // 更新 UI
                setState(() {
                  _response = response.data.toString();
                });
              },
              child: Text('发送 GET 请求'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中,我们定义了一个 HomePage,其中包含一个按钮。当用户点击按钮时,会发送一个 GET 请求到 https://jsonplaceholder.typicode.com/posts/1 并更新 UI 显示返回的数据。

发送 POST 请求

除了 GET 请求,你还可以使用 dio_net 发送 POST 请求。以下是一个简单的例子:

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _response = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dio Net Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_response),
            ElevatedButton(
              onPressed: () async {
                // 发送 POST 请求
                var response = await DioNet.post(
                  'https://jsonplaceholder.typicode.com/posts',
                  data: {
                    "title": 'foo',
                    "body": 'bar',
                    "userId": 1,
                  },
                );
                
                // 更新 UI
                setState(() {
                  _response = response.data.toString();
                });
              },
              child: Text('发送 POST 请求'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


dio 是一个非常流行的 Flutter 网络请求插件,它提供了强大的功能和灵活的配置选项。dio_net 并不是一个官方的插件,可能是某个开发者或团队对 dio 的封装或扩展。不过,我们可以以 dio 为基础,介绍如何使用它来进行网络请求。

1. 添加依赖

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

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

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

2. 基本使用

2.1 创建 Dio 实例

import 'package:dio/dio.dart';

final dio = Dio();

2.2 发起 GET 请求

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

2.3 发起 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');
  }
}

3. 配置 Dio 实例

你可以通过配置 BaseOptions 来定制 Dio 实例的行为。

final dio = Dio(
  BaseOptions(
    baseUrl: 'https://jsonplaceholder.typicode.com',
    connectTimeout: Duration(seconds: 5),
    receiveTimeout: Duration(seconds: 3),
    headers: {
      'Content-Type': 'application/json',
    },
  ),
);

4. 拦截器

Dio 提供了拦截器功能,可以在请求发送前或响应返回后进行一些操作。

4.1 添加请求拦截器

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.message}');
      return handler.next(e);
    },
  ),
);

5. 取消请求

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

final cancelToken = CancelToken();

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

// 取消请求
void cancelRequest() {
  cancelToken.cancel('Request canceled by user');
}

6. 处理错误

Dio 提供了丰富的错误处理机制,你可以根据不同的错误类型进行处理。

void fetchData() async {
  try {
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    print(response.data);
  } on DioError catch (e) {
    if (e.response != null) {
      // 服务器返回了错误响应
      print('Error data: ${e.response!.data}');
      print('Error status: ${e.response!.statusCode}');
    } else {
      // 其他错误
      print('Error message: ${e.message}');
    }
  } catch (e) {
    print('Error: $e');
  }
}

7. 文件上传

Dio 还支持文件上传功能。

void uploadFile() async {
  try {
    final response = await dio.post(
      'https://example.com/upload',
      data: FormData.fromMap({
        'file': await MultipartFile.fromFile('path/to/file.txt'),
      }),
    );
    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');
  }
}
回到顶部