Dart与Flutter教程 网络请求处理技巧

在Flutter中，网络请求是一个常见的操作，通常使用http包或dio包来处理。以下是一些网络请求处理的技巧和示例代码。

1. 使用http包进行GET请求

首先，确保在pubspec.yaml中添加http包的依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

然后，可以使用以下代码进行GET请求：

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

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  if (response.statusCode == 200) {
    List<dynamic> data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}

2. 使用dio包进行POST请求

dio是一个功能更强大的HTTP客户端，支持拦截器、表单数据、文件上传等。首先，添加dio包的依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0

然后，可以使用以下代码进行POST请求：

import 'package:dio/dio.dart';

Future<void> postData() async {
  Dio dio = Dio();
  final response = await dio.post(
    'https://jsonplaceholder.typicode.com/posts',
    data: {
      'title': 'foo',
      'body': 'bar',
      'userId': 1,
    },
  );

  if (response.statusCode == 201) {
    print(response.data);
  } else {
    throw Exception('Failed to post data');
  }
}

3. 处理网络请求的错误

在实际应用中，网络请求可能会失败，因此需要处理错误。可以使用try-catch来捕获异常：

Future<void> fetchData() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    
    if (response.statusCode == 200) {
      List<dynamic> data = jsonDecode(response.body);
      print(data);
    } else {
      throw Exception('Failed to load data');
    }
  } catch (e) {
    print('Error: $e');
  }
}

4. 使用FutureBuilder或StreamBuilder在UI中显示数据

在Flutter中，可以使用FutureBuilder或StreamBuilder来在UI中显示异步数据：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Network Request')),
        body: FutureBuilder(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else {
              List<dynamic> data = snapshot.data as List<dynamic>;
              return ListView.builder(
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(data[index]['title']),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}

Future<List<dynamic>> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

5. 使用拦截器处理请求和响应

dio包支持拦截器，可以在请求发出前或响应返回后进行一些处理：

Dio dio = Dio();

dio.interceptors.add(InterceptorsWrapper(
  onRequest: (options, handler) {
    // 在请求发出前处理
    print('Sending request to ${options.path}');
    return handler.next(options);
  },
  onResponse: (response, handler) {
    // 在响应返回后处理
    print('Response received');
    return handler.next(response);
  },
  onError: (DioError e, handler) {
    // 在请求失败时处理
    print('Error: ${e.message}');
    return handler.next(e);
  },
));

这些技巧可以帮助你更高效地处理Flutter中的网络请求。根据具体需求选择合适的工具和方法。