Flutter网络请求拦截插件api_service_interceptor的使用

API Service Interceptor

Api Service interceptor 是一个 Flutter 包，它可以帮助你以最简单的方式从服务器获取和传递数据。

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  api_service_interceptor: latest

或者直接使用命令行工具：

flutter pub add api_service_interceptor

功能

ApiServiceInterceptor 类有两个主要方法：

• requestToServer()
• multipartRequestToServer()

requestToServer()

此方法用于发送普通请求到服务器。它接受四个参数：

示例代码：

ApiResponseModel responseModel = await apiServiceInterceptor.requestToServer(
  requestUrl: "https://example.com/api/login",
  requestMethod: ApiRequestMethod.postRequest,
  bodyParams: jsonEncode({
    "username": "user",
    "password": "pass"
  }),
  headers: {'Content-Type': 'application/json'}
);

multipartRequestToServer()

此方法用于发送多部分表单数据（如文件上传）。它接受七个参数：

示例代码：

ApiResponseModel responseModel = await apiServiceInterceptor.multipartRequestToServer(
  requestUrl: "https://example.com/api/upload",
  requestMethod: "POST",
  headers: {'Content-Type': 'multipart/form-data'},
  multipartFileField: "file",
  multipartFileValue: "/path/to/file.txt",
  multipartFileName: "file.txt",
  multipartContentType: MediaType("text", "plain")
);

响应模型

ApiResponseModel 类用于存储服务器响应的数据，包含两个字段：

• _statusCode: 存储状态码，类型为 int
• _responseJson: 存储响应内容，类型为 String

枚举

ApiRequestMethod 枚举定义了所有可能的 HTTP 请求方法，例如：

enum ApiRequestMethod {
  get,
  post,
  put,
  delete,
  patch,
  head,
  options,
  postRequest, // 自定义名称
}

使用示例

以下是一个完整的登录页面示例，展示了如何使用 api_service_interceptor 进行用户登录：

import 'dart:convert';
import 'package:api_service_interceptor/api_service_interceptor.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initDependency();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialBinding: LoginBinding(),
      home: const LoginScreen(),
    );
  }
}

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final formKey = GlobalKey<FormState>();
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  bool showPassword = false;
  bool isSubmit = false;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 100),
          child: Form(
            key: formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Login', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
                const SizedBox(height: 20),
                TextFormField(
                  controller: emailController,
                  validator: (value) => value?.isEmpty ?? true ? "Please enter a username" : null,
                  decoration: const InputDecoration(hintText: 'Enter your username'),
                ),
                const SizedBox(height: 20),
                TextFormField(
                  controller: passwordController,
                  obscureText: !showPassword,
                  validator: (value) => value?.isEmpty ?? true ? "Password Field Not Be Empty" : null,
                  decoration: InputDecoration(
                    hintText: 'Enter your password',
                    suffixIcon: IconButton(
                      icon: Icon(showPassword ? Icons.visibility_off : Icons.visibility),
                      onPressed: () => setState(() => showPassword = !showPassword),
                    ),
                  ),
                ),
                const SizedBox(height: 30),
                ElevatedButton(
                  onPressed: () async {
                    if (formKey.currentState!.validate()) {
                      setState(() => isSubmit = true);
                      ApiResponseModel responseModel = await loginRepo.loginUser(
                        username: emailController.text.trim(),
                        password: passwordController.text.trim(),
                      );

                      if (responseModel.statusCode == 200) {
                        final loginResponseModel = LoginResponseModel.fromJson(jsonDecode(responseModel.responseJson));
                        await loginRepo.apiServiceInterceptor.sharedPreferences.setString("accessTokenKey", loginResponseModel.token ?? "");
                        print("Login Successfully");
                      } else {
                        print("Login Failed with status code ${responseModel.statusCode}");
                      }
                      setState(() => isSubmit = false);
                    }
                  },
                  child: isSubmit ? const CircularProgressIndicator(color: Colors.white) : const Text("Continue"),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class LoginBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => LoginRepo(apiServiceInterceptor: Get.find()));
    Get.lazyPut(() => LoginController(loginRepo: Get.find()));
  }
}

class LoginController extends GetxController {
  final LoginRepo loginRepo;

  LoginController({required this.loginRepo});

  Future<void> signInUser(String username, String password) async {
    ApiResponseModel responseModel = await loginRepo.loginUser(username: username, password: password);

    if (responseModel.statusCode == 200) {
      final loginResponseModel = LoginResponseModel.fromJson(jsonDecode(responseModel.responseJson));
      await loginRepo.apiServiceInterceptor.sharedPreferences.setString("accessTokenKey", loginResponseModel.token ?? "");
      print("Login Successfully");
    } else {
      print("Login Failed with status code ${responseModel.statusCode}");
    }
  }
}

class LoginRepo {
  final ApiServiceInterceptor apiServiceInterceptor;

  LoginRepo({required this.apiServiceInterceptor});

  Future<ApiResponseModel> loginUser({required String username, required String password}) async {
    String url = "https://example.com/api/login";

    Map<String, String> bodyParams = {
      "username": username,
      "password": password
    };

    Map<String, String> headers = {'Content-Type': 'application/json'};

    ApiResponseModel responseModel = await apiServiceInterceptor.requestToServer(
      requestUrl: url,
      requestMethod: ApiRequestMethod.postRequest,
      bodyParams: jsonEncode(bodyParams),
      headers: headers
    );

    return responseModel;
  }
}

class LoginResponseModel {
  String? token;

  LoginResponseModel({this.token});

  factory LoginResponseModel.fromJson(Map<String, dynamic> json) {
    return LoginResponseModel(token: json['token']);
  }

  Map<String, dynamic> toJson() {
    return {'token': token};
  }
}

Future<void> initDependency() async {
  final sharedPreference = await SharedPreferences.getInstance();
  Get.lazyPut(() => sharedPreference, fenix: true);
  Get.lazyPut(() => ApiServiceInterceptor(sharedPreferences: Get.find()), fenix: true);
}

这个示例展示了如何使用 api_service_interceptor 包进行用户登录，并处理响应数据。你可以根据需要修改和扩展此代码。