我正在研究离子。我发送了多个http请求。
我想仅在网络连接可用时才发送http请求。
有时我们的网络连接可用。在应用内玩游戏时，我们会离线
我们可以检测到这个以及如何检测？
由于
答案 0 :(得分：5)
正如Sabarish已经指出的那样，使用Network information plugin。
Nic Raboy的博文很好，虽然你可能想查看我写的帖子，它逐步告诉你应该放置一些代码的地方和原因（如果你刚开始使用Ionic，可能会有用） ）：http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/。
另外，我在Github上免费提供了示例代码：https://github.com/Hitman666/IonicNetworkInfo。
编辑：根据StackOverflow的规则，我也在这里添加帖子内容：
如何自己制作
一步一步通过执行以下操作启动新的离子项目：
ionic start IonicNetworkInfo blank
然后，将目录更改为新创建的IonicNetworkInfo：
cd IonicNetworkInfo
使用Bower安装ngCordova：
bower install ngCordova
如果您没有安装bower，可以使用npm：
进行安装npm install bower -g
在您喜欢的编辑器中打开www / index.html文件，并添加对ngCordova的引用（就在cordova.js脚本上方）：
<!-- This is what you should add, the cordova below you'll already have -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
通过在终端/命令提示符中执行以下命令来安装ngCordova网络插件（您应该从应用程序的根目录执行此操作;因此，在我们的示例中为IonicNetworkInfo目录）：
cordova plugin add org.apache.cordova.network-information
要检查您是否已成功安装插件，您可以运行以下命令（从根目录 - 我将不再重复此操作;当我说您应该从终端/命令提示符运行某些命令时，在这种情况下，意味着来自应用程序的根目录）：
cordova plugin list
您应该看到以下输出：
> cordova plugin list
com.ionic.keyboard 1.0.4 "Keyboard"
org.apache.cordova.network-information 0.2.15 "Network Information"
打开www / js / app.js文件并将ngCordova添加到依赖项列表中，这样第一行基本上如下所示：
angular.module('starter', ['ionic', 'ngCordova'])
在名为MyCtrl的www / js / app.js文件中创建一个新控制器，其中包含以下内容：
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
document.addEventListener("deviceready", function () {
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
})
在此控制器中，您在deviceready事件上附加了一个事件侦听器（因为可能是在运行此代码时设备尚未初始化）并且您获得了以下网络信息：
$cordovaNetwork.getNetwork();
有关您连接到互联网的天气的信息，请通过以下行获取：
$scope.isOnline = $cordovaNetwork.isOnline();
然后，您注册两个事件$ cordovaNetwork：online和$ cordovaNetwork：online，当设备联机/离线时触发。在其中，您只需更新$ scope变量（）。 仅供参考，www / js / app.js文件的全部内容应为：
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
document.addEventListener("deviceready", function () {
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
});
在index.html文件中，ion-content标签内部粘贴以下内容：
<div class="card">
<div class="item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class="card">
<div class="item item-text-wrap">
<ion-toggle ng-model="isOnline" ng-checked="item.checked">
<h1 ng-show="isOnline">I'm online</h1>
<h1 ng-show="! isOnline">I'm offline</h1>
</ion-toggle>
</div>
</div>
基本上我们在这里做的是显示网络变量的内容（通过控制器附加到$ scope）。此外，通过使用离子切换组件，我们显示“我在线”/“我离线”通知。
仅供参考，整个index.html文件的内容应如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="MyCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content padding="true">
<div class="card">
<div class="item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class="card">
<div class="item item-text-wrap">
<ion-toggle ng-model="isOnline" ng-checked="item.checked">
<h1 ng-show="isOnline">I'm online</h1>
<h1 ng-show="! isOnline">I'm offline</h1>
</ion-toggle>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
为了测试此应用程序，您应该在您的设备上运行它（因为您无法在iOS模拟器中禁用网络）。如果您的Android设备已插入计算机（以及所有适当的SDK），您可以运行以下命令以在Android设备上运行您的应用程序：
ionic build android && ionic run android
答案 1 :(得分：2)