Flutter代码锦囊---根据环境选择URL地址

现在要给公司开发一个内部使用的APP，但是因为是小公司，没有多余的服务器资源，只能拿公司的主机当服务器，也只能在通过映射实现外网访问。所以呀，很蛋疼，只能想办法判断用户是在内网使用APP，还是在外网使用APP，然后根据环境选择URL请求的IP地址。

首先是新建一个dart文件，把Flutter应用和页面的架子搭起来，然后运行调试，确认应用可以正常跑起来。

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold( 
    );
  }
}

虽然很容易发出网络请求，但使用原始的Future <http.Response>并不是很方便。所以，为了让我们的开发更轻松一些，我们可以将http.Response转换为我们自己的Dart对象。

首先，我们需要创建一个ComeBack类，其中包含来自网络请求的数据。它还将包含一个工厂构造函数，允许我们从json创建一个ComeBack。当然，手动转换JSON只是一种选择，还可以用JSON和序列化。

class ComeBack {
  final int code;
  final String msg;
  final  data;

  ComeBack({
    this.code,
    this.msg,
    this.data,
  });

  factory ComeBack.fromJson(Map<String, dynamic> json) {
    return ComeBack(
      code: json['code'],
      msg: json['msg'],
      data: json['data'],
    );
  }
}

给两个固定的内网/外网地址，再定义一个全局变量来承载实际的请求地址。

final String urlExtranet = 'http://218.15.158.64:8001/';
final String urlIntranet = 'http://192.168.9.247/';

String url = '';

http.get方法返回包含Response的Future，Future是用于处理异步操作的核心Dart类，它用于表示将来某个时间可用的潜在值或错误信息。http.Response类包含从成功的http调用接收的数据。

如果对内网IP（urlIntranet）的调用成功，则说明当前用户处于内网环境，那么接下来使用的都是内网IP。如果该调用不成功，则抛出错误，那么就立即切换为外网IP继续访问。

Future<ComeBack> fetchToken() async {
  url = urlIntranet;
  await http.get(url).catchError(
    (error) {
      url = urlExtranet;
    }
  );

  final response = await http.post(
    url + 'api/apirunner/auth/',
    body: {'username': 'username', 'password': 'password'},
  );

  if (response.statusCode == 200) {
    return ComeBack.fromJson(json.decode(response.body));
  } else {
    throw Exception('无法加载数据');
  }
}

为了获取数据并将其显示在屏幕上，我们可以使用FutureBuilder组件， FutureBuilder组件附带Flutter，可以轻松使用异步数据源。

future参数表示我们希望使的Future，在我们的例子中，我们将调用我们的fetchToken()函数。

builder参数是一个构建器函数，它告诉Flutter要呈现什么，具体取决于Future的状态：加载中、请求成功或请求错误。

  ………
    return new Scaffold( 
      body: FutureBuilder<ComeBack>(
        future: fetchToken(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text(snapshot.data.data);
          } else if (snapshot.hasError) {
            return Center(
              child: SizedBox(
                height: 92.0,
                child: Column(
                  children: <Widget>[
                    Icon(
                      Icons.sentiment_very_dissatisfied,
                      size: 32.0,
                    ),
                    Text('${snapshot.error}'),
                  ],
                ),
              ),
            );
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  ………

如下，屏幕可以会出现三种状态：加载中状态、请求成功状态和请求错误状态，请求错误状态会显示错误信息。

根据环境选择URL地址效果

Flutter代码锦囊---根据环境选择URL地址

猜你喜欢