Flutter网络请求插件mati_rest_api的使用

mati_rest_api 是一个用于简化 Flutter 应用中网络请求的插件。它基于 Dart 的 http 包，提供了更简洁的 API 和更友好的接口来处理 RESTful API 请求。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 mati_rest_api 作为依赖：

dependencies:
  mati_rest_api: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 初始化客户端

在应用启动时初始化 MatiRestClient，并设置基础 URL 和其他配置（如超时时间）。

import 'package:mati_rest_api/mati_rest_api.dart';

void main() {
  // 初始化 MatiRestClient
  MatiRestClient.instance.baseUrl = 'https://jsonplaceholder.typicode.com';
  MatiRestClient.instance.timeout = Duration(seconds: 10);

  runApp(MyApp());
}

3. 发送网络请求

GET 请求

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

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

class _MyHomePageState extends State<MyHomePage> {
  String _response = '';

  Future<void> fetchData() async {
    try {
      // 发送 GET 请求
      final response = await MatiRestClient.instance.get('/posts/1');

      // 处理响应
      setState(() {
        _response = response.body.toString();
      });
    } catch (e) {
      // 处理错误
      setState(() {
        _response = e.toString();
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GET 请求示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: fetchData,
              child: Text('获取数据'),
            ),
            SizedBox(height: 20),
            Text(_response),
          ],
        ),
      ),
    );
  }
}

POST 请求

Future<void> postData() async {
  try {
    // 定义请求体
    final body = {
      'title': 'foo',
      'body': 'bar',
      'userId': 1,
    };

    // 发送 POST 请求
    final response = await MatiRestClient.instance.post('/posts', body);

    // 处理响应
    setState(() {
      _response = response.body.toString();
    });
  } catch (e) {
    // 处理错误
    setState(() {
      _response = e.toString();
    });
  }
}

4. 错误处理

mati_rest_api 提供了统一的错误处理机制。当请求失败时，可以通过捕获异常来处理错误信息。

try {
  final response = await MatiRestClient.instance.get('/invalid-endpoint');
} on MatiApiException catch (e) {
  print('错误状态码: ${e.statusCode}');
  print('错误消息: ${e.message}');
} catch (e) {
  print('未知错误: $e');
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 mati_rest_api 进行 GET 和 POST 请求：

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

void main() {
  // 初始化 MatiRestClient
  MatiRestClient.instance.baseUrl = 'https://jsonplaceholder.typicode.com';
  MatiRestClient.instance.timeout = Duration(seconds: 10);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  String _responseGet = '';
  String _responsePost = '';

  Future<void> fetchData() async {
    try {
      final response = await MatiRestClient.instance.get('/posts/1');
      setState(() {
        _responseGet = response.body.toString();
      });
    } catch (e) {
      setState(() {
        _responseGet = e.toString();
      });
    }
  }

  Future<void> postData() async {
    try {
      final body = {
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      };
      final response = await MatiRestClient.instance.post('/posts', body);
      setState(() {
        _responsePost = response.body.toString();
      });
    } catch (e) {
      setState(() {
        _responsePost = e.toString();
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('mati_rest_api 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: fetchData,
              child: Text('发送 GET 请求'),
            ),
            SizedBox(height: 20),
            Text(_responseGet),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: postData,
              child: Text('发送 POST 请求'),
            ),
            SizedBox(height: 20),
            Text(_responsePost),
          ],
        ),
      ),
    );
  }
}