Flutter网络请求插件mx_request的使用

mx_request 是一个用于 Flutter 的网络请求插件，它简化了 HTTP 请求的处理过程。使用 mx_request，你可以轻松地进行 GET、POST、PUT、DELETE 等 HTTP 请求。以下是 mx_request 的基本使用方法：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 mx_request 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  mx_request: ^1.0.0  # 请使用最新版本

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

2. 初始化 mx_request

在使用 mx_request 之前，你需要在应用启动时进行初始化。通常可以在 main.dart 中进行初始化：

import 'package:mx_request/mx_request.dart';

void main() {
  MXRequest.init(
    baseUrl: 'https://jsonplaceholder.typicode.com', // 设置基础URL
    connectTimeout: 5000, // 连接超时时间
    receiveTimeout: 3000, // 接收超时时间
  );

  runApp(MyApp());
}

3. 发起网络请求

mx_request 提供了多种方法来发起网络请求，以下是常见的几种请求方式：

GET 请求

import 'package:mx_request/mx_request.dart';

Future<void> fetchData() async {
  try {
    var response = await MXRequest.get('/posts/1');
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

POST 请求

import 'package:mx_request/mx_request.dart';

Future<void> postData() async {
  try {
    var response = await MXRequest.post(
      '/posts',
      data: {
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      },
    );
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

PUT 请求

import 'package:mx_request/mx_request.dart';

Future<void> updateData() async {
  try {
    var response = await MXRequest.put(
      '/posts/1',
      data: {
        'id': 1,
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      },
    );
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

DELETE 请求

import 'package:mx_request/mx_request.dart';

Future<void> deleteData() async {
  try {
    var response = await MXRequest.delete('/posts/1');
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

4. 处理请求头

你可以在请求时添加自定义的请求头：

Future<void> fetchDataWithHeaders() async {
  try {
    var response = await MXRequest.get(
      '/posts/1',
      options: RequestOptions(
        headers: {
          'Authorization': 'Bearer your_token',
        },
      ),
    );
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

5. 处理错误

mx_request 会捕获网络请求中的错误，你可以通过 catch 块来处理这些错误：

Future<void> fetchData() async {
  try {
    var response = await MXRequest.get('/posts/1');
    print('Response data: ${response.data}');
  } on DioError catch (e) {
    if (e.response != null) {
      print('Error status code: ${e.response.statusCode}');
      print('Error response data: ${e.response.data}');
    } else {
      print('Error: $e');
    }
  }
}

6. 拦截器

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

MXRequest.addInterceptor(InterceptorsWrapper(
  onRequest: (RequestOptions options) async {
    // 在请求发送前添加 token
    options.headers['Authorization'] = 'Bearer your_token';
    return options;
  },
  onResponse: (Response response) async {
    // 处理响应数据
    print('Response received: ${response.data}');
    return response;
  },
  onError: (DioError error) async {
    // 处理错误
    print('Error occurred: $error');
    return error;
  },
));

7. 取消请求

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

CancelToken cancelToken = CancelToken();

Future<void> fetchData() async {
  try {
    var response = await MXRequest.get(
      '/posts/1',
      cancelToken: cancelToken,
    );
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

void cancelRequest() {
  cancelToken.cancel('Request cancelled');
}