Flutter插件flash_api的使用方法详解

Flutter插件flash_api的使用方法详解

这是一款用于简化API调用的插件。

配置

安装插件后，您需要在项目根目录创建一个名为env.json的文件。该文件用于配置您的环境设置。

文件env.json

{
    "APP_PROD_ENV"   :   false,          // 指定项目的环境类型（true - 生产环境，false - 开发环境）

    "API_PROD_BASE_URL"   :   "https://production.api.com", // 生产环境API地址
    "API_DEV_BASE_URL"    :   "https://development.api.com", // 开发环境API地址
    "API_CONNECT_TIMEOUT" :   10000,     // 请求发送超时时间（默认10秒）（可选）
    "API_RECEIVE_TIMEOUT" :   10000,     // 响应接收超时时间（默认10秒）（可选）
    "API_TOKEN_TYPE"      :   "Bearer"   // API接受的token类型（可选）
}

在定义了基础URL之后，您可以根据请求类型传递相应的端点到帮助器函数中。

记得将资源添加到pubspec.yaml文件中：

assets:
    - env.json

使用示例

GET 请求

import 'package:flash_api/flash_api.dart';

get_data() async {
    var res = await apiGet('posts');
}

POST 请求

import 'package:flash_api/flash_api.dart';

post_data() async {
    var res = await apiPost('posts', {
        "data1" : "value1",
        "data2" : "value2",
    });
}

DELETE 请求

import 'package:flash_api/flash_api.dart';

delete_data() async {
    var res = await apiDelete('posts/1');
}

返回值

成功情况

成功时，返回值如下：

{
    'data': result,
    'status': result.statusCode
}

错误情况

发生错误时，返回值如下：

{
    'data': e,
    'status': e.response!.statusCode,
    'error': e.response,
}

注意事项

如果要访问的路由受令牌保护，只需在请求帮助器函数中传入“token”参数即可。默认情况下，令牌类型为“Bearer”，但您可以更改env.json文件中的API_TOKEN_TYPE属性。

import 'package:flash_api/flash_api.dart';

get_data() async {
    var res = await apiGet('posts', token : "您的令牌");
}

完整示例代码

import 'dart:developer';

import 'package:flash_api/flash_api.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List datas = [];
  bool err = false;
  bool load = true;

  // 获取数据列表
  get_data() async {
    var res = await apiGet('posts');

    setState(() {
      if (res['status'] == 200) {
        datas = res['data'].data;
        load = false;
      } else {
        setState(() {
          err = true;
          load = false;
        });
      }
    });
  }

  post_data() async {
    var data = await apiPost('posts', {'data1': "Data"});
    print(data);
  }

  delete_data() async {
    var data = await apiDelete('posts/1');
    print(data);
  }

  [@override](/user/override)
  void initState() {
    // 初始化状态
    super.initState();
    get_data();
    post_data();
    delete_data();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text('API 文本'),
            ),
            body: load
                ? const Center(
                    child: CircularProgressIndicator(),
                  )
                : err
                    ? Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Icon(
                              Icons.warning,
                              color: Colors.amber,
                            ),
                            Text("发生错误"),
                          ],
                        ),
                      )
                    : ListView.builder(
                        padding: const EdgeInsets.all(8),
                        itemCount: datas.length,
                        itemBuilder: (BuildContext context, int index) {
                          var data = datas[index];
                          return Card(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: ListTile(
                                leading: CircleAvatar(
                                  backgroundColor: Colors.blue,
                                  radius:
                                      MediaQuery.of(context).size.width / 15,
                                ),
                                title: Text(
                                  "${data['title']} ...",
                                  maxLines: 1,
                                ),
                                subtitle: Text(
                                  data['body'],
                                  maxLines: 3,
                                ),
                              ),
                            ),
                          );
                        })));
  }
}