ionic 运行过程当中动态切换API服务器地址

时间  2020-08-17
标签 ionic 运行 过程 当中 动态 切换 api 服务器 地址 繁體版
原文   原文链接

ionic 运行过程当中动态切换API服务器地址

keywords:html

ionic,phonegap,cordova,网络制式,动态切换,变动,API,服务器地址,$resource,localstorage,urlapi

场景、需求

场景promise

APP以项目的形式提供，一个客户须要部署一套服务器，一个APP，因此APP的后台服务器地址不能写死。并且要求若是有wifi且在内网，须要用内网服务器地址，若是用3G或者4G，则需切换为外网服务器地址服务器

需求网络

APP第一次运行，若是没有设置过服务器地址，须要设置好后台服务器地址（含内网和外网，外网是必选，内网是可选）ionic

APP运行过程当中，若是用户手机网络制式发生改变，则须要根据移动网络制式选择合适的服务器地址ide

原有URL的设置post

之前APP的API地址，是直接写到一个constant里面，例如：优化

(function () {
  "use strict";
  angular.module("gaia.config", [])
    .constant("ENV", {
      "version": "1.0.1",
      "name": "production",
      "debug": true,
      "api": "http://111.111.111.111:8088/gaia/api",
    });
})();

resource的调用url

var resource = $resource(ENV.api + '/customer',{},{
      login:{
        method:'post',
        url:ENV.api + '/customer/login'
      },
      accesstoken:{
        method:'get',
        url:ENV.api + '/customer/accesstoken'
      }
    });

方案一

（后面实现方案有部分变更）

保留ENV，APP第一次启动将设置的url存到localstorage里面，在之后每次启动前，从localstorage里面取出来赋值给ENV.api，当网络制式发生改变时，再根据状况赋值改变ENV.api。全部与后台相关的Service 的$resource 的初始化都依赖于ENV.api。

设计的关键点：

  • 启动时须要检查localstorage里面是否有url的值，没有则弹出设置页
  • ENV.api的赋值必定要先于APP的启动，不然Service的$resource的url 都为空了
  • Service 须要将$resource的定义封装并开放出接口，便于后期改变$resource的url定义
  • 网络制式改变，ENV.api的改变，Service的$resource的从新定义

设置页面

请忽略美观(-__-)b

设置页图片

Service $resource 声明方式的改造：

var resource = null;
  var _initResource = function(apiUrl){
    resource = $resource(apiUrl + '/customer',{},{
      login:{
        method:'post',
        url:apiUrl + '/customer/login'
      },
      accesstoken:{
        method:'get',
        url:apiUrl + '/customer/accesstoken'
      }
    });
  };
  _initResource(ENV.api);
return {
    initResource:function(url){
      _initResource(url);
    },
.....

新增Service，统一变动$resource

每次变动就调用先设置ENV.api，再_Sys.changeResource(ENV.api);

(function () {
  'use strict';
  angular.module('gaia.services')
    .factory('_Sys', function (ENV, User, Projects, Plans) {
      return {
        changeResource: function (url) {
          User.initResource(url);
          Projects.initResource(url);
          Plans.initResource(url);
        }
      };
    });
})();

网络制式切换，调整URL

关于网络制式的监控的相关细节见：ngcordova 监控网络制式改变

$rootScope.$on('$cordovaNetwork:online', function (event, networkState) {
    var type = $cordovaNetwork.getNetwork();
    if (type == Connection.WIFI) {
      var wifiApi = Settings.getWIFIAPI();
      if (wifiApi) {
		//test方法定义见方案二Setting定义
        Settings.test(wifiApi).$promise.then(function (response) {
          if (response.success) {
            //切换内网服务器地址中....
            _Sys.changeResource(wifiApi);
          }
        }, function (e) {});
      }
    }
    else if (type == Connection.CELL_4G || type == Connection.CELL_3G) {
      var wlanApi = Settings.getAPI();
      //切换移动网(3G|4G)服务器地址中....
      _Sys.changeResource(wlanApi);
    }
  });

方案二

大致思路同方案一，只是在思想方案一过程当中，又是localstorage 又是ENV.api，各类判断，给绕晕了，后来一想，url最终仍是以localstorage里面存储的为准，何不抛弃ENV.api，实现大统一(●ˇ∀ˇ●)

设计思路改动点：

  • 抛弃ENV.api，全部获取和设置，均以localstorage为准
  • 简化、优化API地址的获取和设置，见下面Setting Service 的定义（新增getAPI(),getWIFIAPI())
  • 全部Service $resource中的URL，均取于Setting.getAPI()方法
  • 进入第一个页面前，判断Setting.getAPI()的值是否存在，不存在则弹出设置页面进行设置

1.用户设置的API地址，存储到localstorage里面，定义两个基础Service，一个用于localstorage操做，一个用于APP参数设置

//Storage Service 定义

(function(){
  'use strict';
  angular.module('gaia.services')
    .factory('Storage',function($log){
      $log.debug("Storage Service init");
      return {
        set:function(key,data){
          return window.localStorage.setItem(key,window.JSON.stringify(data));
        },
        get:function(key){
          return window.JSON.parse(window.localStorage.getItem(key));
        },
        remove:function(key){
          return window.localStorage.removeItem(key);
        }
      };
    });
})();

//Settings Service 定义

(function () {
  'use strict';
  angular.module('gaia.services')
    .factory('Settings', function ($resource, $log, Storage) {
      var storageKey = 'settings';
      var _settings = Storage.get(storageKey) || {};
      var addOn = '/gaia/api';
      return {
        getSettings: function () {
          return _settings;
        },
        save: function (settings) {
          Storage.set(storageKey, settings);
          _settings = settings;//改变内存中的_settings,便于每次调用getAPI时都能取到最新值
          return settings;
        },
        getAPI: function () {
          if (_settings.wlan) {
            return "http://" + _settings.wlan + addOn;
          }
          return "";
        },
        getWIFIAPI: function () {
          if (_settings.wifiMode && _settings.wifi) {
            return "http://" + _settings.wifi + addOn;
          }
          return "";
        },
        test: function (url) {
          var resource = $resource("http://" + url + addOn + "/test", {}, {
            query: {
              method: 'get',
              isArray: false,
              timeout: 2000
            }
          });
          return resource.query();
        }
      };
    });
})();

2.Service $resource 的部分改动

var resource = null;
  var _initResource = function(apiUrl){
    resource = $resource(apiUrl + '/customer',{},{
      login:{
        method:'post',
        url:apiUrl + '/customer/login'
      },
      accesstoken:{
        method:'get',
        url:apiUrl + '/customer/accesstoken'
      }
    });
  };
 //将此处的ENV.api 换成Settings.getAPI()
 // _initResource(ENV.api);
  _initResource(Settings.getAPI());

3.检测是否存在API地址，不存在则弹出设置页面

$scope.api = Settings.getAPI();
$ionicModal.fromTemplateUrl('templates/urlSetting.html', {
    scope: $scope
  }).then(function (modal) {
    $scope.settingModal = modal;
    if ((!$scope.api) || ($scope.api.indexOf("http://") === -1)) {
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
      $scope.settingModal.show();
    }
  });

//保存设置值方法
$scope.saveSettings = function () {
    //1.save setting 到localstorage
    if (!$scope.settings.wifiMode) {
      $scope.settings.wifi = "";
    }
    Settings.save($scope.settings);
    $ionicLoading.show({
      noBackdrop: true,
      template: "<div><h1><i class='icon ion-checkmark-circled balanced'></i></h1>保存成功</div>",
      duration: 1000
    });
    $scope.api = Settings.getAPI();
    //2.变动全部Service 中的resource
    _Sys.changeResource($scope.api);
    $scope.settingModal.hide();
  };

总结

为了实现APP的后台API地址动态改变，只要找到问题的核心，不外乎围绕着API_URL 的获取 和设置 来实现该功能

获取：

  • 判断localstroage是否存储了API_URL - 增长判断方法
  • 与后台服务器请求相关的Service - 变动$resource 的定义方法，并开放出改变的接口

设置：

  • localstroage里面没有API_URL ,弹出页，保存时
  • 网络制式发生变化时

【原创】，转载请带上原地址http://www.cnblogs.com/sloong/p/5151019.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程