Flutter AJAX 请求插件 fajax 的使用

2023 © Bikramaditya Meher

这是一个用于 Web 端通过 AJAX 和 PHP 发起 API 请求的插件。在发布构建时，它可以解决服务器端的 CORS 问题。请注意，它仅在发布构建中有效。

首先，在 pubspec.yaml 文件中添加该插件：

fajax: ^1.0.0

为了使用 Fajax，你可以在你的状态类中调用以下代码：

final _fajaxPlugin = Fajax();

发起请求的代码如下：

late http.Response response;

if (kIsWeb && kReleaseMode) {
  try {
    await Fajax().makeRequest(
        fajaxModel: FajaxModel(
          baseUrl: "https://geolocation-db.com/json",
          body: {},
          params: {},
          headers: {},
          method: "GET",
        ),
        onSuccess: (fajaxResult) {
          try {
            response = http.Response(
              fajaxResult.response.toString(),
              fajaxResult.info['http_code'],
            );
          } catch (e) {
            print("错误在 JSON 解码 $e :: 结束错误");
          }
        },
        onError: (p0) {
          print("获取数据时出错 $p0");
          response = http.Response(
            "发生错误!!",
            404,
          );
        });
  } catch (e) {
    print("从 fajax 获取数据时出错 :: $e lllll ");
    response = http.Response(
      "发生错误!!",
      -1,
    );
  }
} else {
  response = await http
      .get(Uri.parse("https://geolocation-db.com/json"), headers: {});
  log('响应状态码: ${response.statusCode}\n :: $url  || ${response.body}');
}

贡献

欢迎提交拉取请求。对于重大更改，请先打开一个议题讨论你想要进行的更改。

更多详细信息，请查看示例文件夹。

示例代码

import 'dart:async';

import 'package:fajax/fajax.dart';
import 'package:fajax/model/fajax_model.dart';
import 'package:flutter/material.dart';
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> {
  String _platformVersion = 'Unknown';
  final _fajaxPlugin = Fajax();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    String platformVersion;

    // 平台消息可能会失败，所以我们使用 try/catch 来处理 PlatformException。
    // 我们还处理了消息可能返回 null 的情况。
    try {
      Future.delayed(Duration(seconds: 5), () async {
        await _fajaxPlugin.makeRequest(
            fajaxModel: FajaxModel(
                baseUrl: "https://geolocation-db.com/json",
                body: {},
                params: {},
                headers: {},
                method: "GET"),
            onSuccess: (fajaxResult) {
              {
                String countryCode = fajaxResult.response['country_code'];
                print(
                    " 成功回调 ${DateTime.now()} :: $countryCode ::  ${fajaxResult.response}");
              }
            },
            onError: (p0) => {print(" 错误回调 $p0")});
      });

      // platformVersion =
      //     await _fajaxPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = '获取平台版本失败。';
    }

    // 如果在异步平台消息还在飞行时小部件被从树中移除，我们希望丢弃回复而不是调用
    // setState 来更新我们的非存在的外观。
    if (!mounted) return;
    //
    // setState(() {
    //   _platformVersion = platformVersion;
    // });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Text('运行于: $_platformVersion\n'),
        ),
      ),
    );
  }
}