【Flutter——网络编程】

Flutter 网络请求

在 Flutter 中进行网络请求是非常常见的需求，Flutter 提供了多种方式来实现网络请求，包括使用原生的 http 包、通过第三方库如 dio 进行网络请求等。

1. 使用 http 包进行网络请求

首先，需要在 pubspec.yaml 文件中添加 http 包的依赖：

dependencies:
  http: ^0.13.0

然后，在需要发送网络请求的文件中引入 http 包：

import 'package:http/http.dart' as http;

发送 GET 请求

使用 http 包发送 GET 请求的示例代码如下：

Future<void> fetchData() async {
  var url = Uri.parse('https://api.example.com/data');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    // 请求成功
    print(response.body);
  } else {
    // 请求失败
    print('Request failed with status: ${response.statusCode}');
  }
}

在上面的示例中，我们通过 http.get 方法发送了一个 GET 请求，并通过 response.statusCode 判断请求是否成功。如果成功，我们可以通过 response.body 获取返回的数据。

发送 POST 请求

使用 http 包发送 POST 请求的示例代码如下：

Future<void> sendData() async {
  var url = Uri.parse('https://api.example.com/data');
  var response = await http.post(url, body: {'name': 'John', 'age': '30'});

  if (response.statusCode == 200) {
    // 请求成功
    print(response.body);
  } else {
    // 请求失败
    print('Request failed with status: ${response.statusCode}');
  }
}

在上面的示例中，我们通过 http.post 方法发送了一个 POST 请求，并提供了请求的参数。同样地，我们可以通过 response.body 获取返回的数据。

2. 使用 dio 库进行网络请求

dio 是一个强大、易用的 Flutter 网络请求库，它提供了更多的功能和便利性。

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

dependencies:
  dio: ^4.0.0

然后，在需要发送网络请求的文件中引入 dio 库：

import 'package:dio/dio.dart';

发送 GET 请求

使用 dio 库发送 GET 请求的示例代码如下：

Future<void> fetchData() async {
  var dio = Dio();
  var url = 'https://api.example.com/data';

  try {
    var response = await dio.get(url);
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

在上面的示例中，我们创建了一个 Dio 实例，然后使用 dio.get 方法发送 GET 请求。通过 response.data 可以获取返回的数据。

发送 POST 请求

使用 dio 库发送 POST 请求的示例代码如下：

Future<void> sendData() async {
  var dio = Dio();
  var url = 'https://api.example.com/data';
  var data = {'name': 'John', 'age': '30'};

  try {
    var response = await dio.post(url, data: data);
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

在上面的示例中，我们使用 dio.post 方法发送 POST 请求，并提供了请求的参数。同样地，通过 response.data 可以获取返回的数据。

网络请求操作

设置请求头

在发送网络请求之前，通过设置请求头，我们可以传递一些额外的信息给服务器。以下是使用 http 包和 dio 库设置请求头的示例：

使用 http 包设置请求头示例：

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  var url = Uri.parse('https://api.example.com/data');
  var headers = {'Authorization': 'Bearer your_token'};
  
  var response = await http.get(url, headers: headers);
  
  // ...
}

在上面的示例中，我们通过 headers 参数设置了请求头，其中 Authorization 是一个自定义的请求头字段。

使用 dio 库设置请求头示例：

import 'package:dio/dio.dart';

Future<void> fetchData() async {
  var dio = Dio();
  var url = 'https://api.example.com/data';
  var headers = {'Authorization': 'Bearer your_token'};
  
  dio.options.headers.addAll(headers);
  
  var response = await dio.get(url);

  // ...
}

在上面的示例中，通过 dio.options.headers.addAll(headers) 方法设置了请求头。

设置超时时间

设置超时时间可以确保网络请求在指定的时间内得到响应，避免长时间等待或无响应的情况。

使用 http 包设置超时时间示例：

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  var url = Uri.parse('https://api.example.com/data');
  
  var client = http.Client();
  try {
    var response = await client.send(http.Request('GET', url)).timeout(Duration(seconds: 10));
    // ...
  } catch (e) {
    print('Error: $e');
  } finally {
    client.close();
  }
}

在上面的示例中，我们使用 client.send 方法发送请求，并通过 timeout 方法设置了超时时间为 10 秒。

使用 dio 库设置超时时间示例：

import 'package:dio/dio.dart';

Future<void> fetchData() async {
  var dio = Dio();
  dio.options.connectTimeout = 10000; // 10 秒
  dio.options.receiveTimeout = 10000; // 10 秒
  
  var url = 'https://api.example.com/data';
  
  try {
    var response = await dio.get(url);
    // ...
  } catch (e) {
    print('Error: $e');
  }
}

在上面的示例中，我们通过 dio.options.connectTimeout 和 dio.options.receiveTimeout 设置了连接和接收超时时间为 10 秒。

设置拦截器

拦截器可以在网络请求发送和响应返回的过程中拦截并处理请求或响应。我们可以使用拦截器来记录请求日志、添加公共参数、处理错误等。

以下是使用 dio 库设置拦截器的示例：

import 'package:dio/dio.dart';

void main() {
  var dio = Dio();
  
  dio.interceptors.add(LogInterceptor()); // 添加日志拦截器
  
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) {
      // 在发送请求前的处理
      // 可以在这里添加公共参数、设置请求头等
      return handler.next(options);
    },
    onResponse: (response, handler) {
      // 在响应返回后的处理
      // 可以在这里进行数据解析、错误处理等
      return handler.next(response);
    },
    onError: (DioError e, handler) {
      // 在请求发生错误时的处理
      // 可以在这里进行错误处理、重试等
      return handler.next(e);
    }
  ));
  
  // 发送网络请求...
}

在上面的示例中，我们通过 dio.interceptors.add 方法添加了三个拦截器：日志拦截器、请求拦截器和错误拦截器。你可以根据需求添加不同的拦截器，并在需要的时候进行相关处理。

处理响应数据的解析和错误处理

当我们从服务器获取到响应数据时，可能需要对其进行解析和错误处理。

使用 http 包解析响应数据示例：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchData() async {
  var url = Uri.parse('https://api.example.com/data');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    var data = json.decode(response.body);
    print(data);
  } else {
    print('Request failed with status: ${response.statusCode}');
  }
}

在上面的示例中，我们使用 json.decode 方法对返回的响应数据进行解析，将其转换为 Dart 对象。

使用 dio 库解析响应数据示例：

import 'package:dio/dio.dart';

Future<void> fetchData() async {
  var dio = Dio();
  var url = 'https://api.example.com/data';
  
  try {
    var response = await dio.get(url);
    
    if (response.statusCode == 200) {
      var data = response.data;
      print(data);
    } else {
      print('Request failed with status: ${response.statusCode}');
    }
  } catch (e) {
    print('Error: $e');
  }
}

在上面的示例中，我们通过 response.data 直接获取响应数据。

关于错误处理，在 http 包和 dio 库中都提供了相应的机制来捕获请求过程中的错误，并进行处理。