Flutter 中 网络请求

203 阅读1分钟

在Flutter中,Dio是一个功能强大的HTTP客户端库,用于进行网络请求。它支持各种HTTP请求类型(GET、POST、PUT、DELETE等),并提供了许多功能,如请求/响应拦截器、文件上传/下载、取消请求等。下面详细介绍Dio的各种用法,并提供相应的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0

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

在 Flutter 中使用 dio 发起网络请求:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dio Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Dio _dio = Dio();

  void _fetchData() async {
    try {
      // 发起 GET 请求
      Response response = await _dio.get('https://jsonplaceholder.typicode.com/posts/1');
      print(response.data);
      // 在这里处理响应数据
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dio Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _fetchData,
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}

在示例代码中,我们首先创建了一个 Dio 实例 _dio。然后,在 _fetchData 函数中,我们使用 await 关键字来等待异步请求的结果。在这个示例中,我们发起了一个简单的 GET 请求来获取一个 JSON 数据。在请求成功后,我们将响应数据打印出来。

1. 发起GET请求

import 'package:dio/dio.dart';

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

2. 发起POST请求

void postData() async {
  try {
    Response 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. 添加请求参数和请求头

void fetchDataWithParams() async {
  try {
    Response response = await Dio().get('https://jsonplaceholder.typicode.com/posts', queryParameters: {'userId': 1});
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

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

4. 文件上传

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

5. 文件下载

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

6. 请求/响应拦截器

void setupInterceptors() {
  Dio dio = Dio();
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) {
      // 在请求之前做一些事情
      return handler.next(options); // 必须调用next
    },
    onResponse: (response, handler) {
      // 在响应之前做一些事情
      return handler.next(response); // 必须调用next
    },
    onError: (e, handler) {
      // 在错误响应之前做一些事情
      return handler.next(e); // 必须调用next
    },
  ));
}

这些是Dio的一些常见用法,你可以根据需要组合使用它们。Dio提供了丰富的API和强大的功能,使得在Flutter应用中进行网络请求变得更加简单和灵活。