3
我正在研究离子。我发送多个http请求。仅在离子网络连接可用时发送HTTP请求
我只想在网络连接可用时发送http请求。
有时我们的网络连接可用。当在应用程序内玩我们离线时。
我们可以检测到这个以及如何？
感谢
A
回答
4
正如Sabarish已经指出，请使用Network information plugin。
Nic Raboy的博客文章很不错，虽然你可能想检查一下我写的文章，它逐字地逐步告诉你在哪里以及为什么你应该放一些代码（如果你刚刚开始离子）：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
与鲍尔安装ngCordova：
npm install bower -g
打开了www/index.html文件：
bower install ngCordova
如果由于某些原因你没有安装凉亭，你可以用NPM安装在你最喜欢的编辑器中，并添加对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'])
创建了www/JS/app.js称为MyCtrl文件的新控制器，具有以下内容：
.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：在线和$ cordovaNetwork：网上当设备上线/下线了触发。在他们中你只需更新$ scope变量（）。 仅供参考，万维网的全部内容/ 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文件，离子含量标签内粘贴以下内容：
<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>
基本上我们在这里做的是我们显示网络变量的内容（它通过控制器附加到$范围）。此外，通过使用离子切换组件，我们显示“我在线”/“我已离线”通知。
仅供参考，整个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设备，你可以运行下面的命令，让您的应用程序在Android设备上运行：
ionic build android && ionic run android
+0
只想问一下。我在我的应用程序中有多个Ctrl。我是否需要在每个ctrl中编写代码？ –
+1
如果您需要在每个控制器中的每个http请求之前检查连接，那么是的。但是，在这种情况下，似乎创建一个发送http请求的服务会更好，因此在这种情况下，您只需要在一个地方进行网络检查。 – Nikola
+0
是的，我必须创建一个相同的服务，谢谢 –
2
相关问题
- 1. python，通过一个网络连接发送很多HTTP请求
- 2. 手机在网络连接不良时是否可以发送多个请求？
- 3. 防止在网络连接不可用时发送UDP数据
- 4. 向访问者网络发送帖子请求？可能？
- 5. 通过3G网络发送HTTP请求而不使用WiFi？
- 6. 发送HTTP请求
- 7. 发送HTTP请求
- 8. 用swift发送http请求
- 9. Http请求离子2
- 10. “连接被重置”仅在Firefox中发送时，http发回
- 11. Java在发送http请求时java.io.EOFException？
- 12. 在特定时间发送Http请求
- 13. 从网络浏览器多次发送http请求
- 14. 发送iPhone HTTP请求到Apache PHP网络服务器
- 15. 离子2 - 页面发送后请求
- 16. 使用Netty的一个连接发送两次http请求
- 17. 连接超时在iPhone为http请求
- 18. 在离线时排队多个AJAX请求，当连接返回时发送
- 19. Http请求发送子类型
- 20. 发送中介忽略HTTP请求数据（仅发送标头！）
- 21. 在我的网络应用程序中发送http请求，在werkzeug
- 22. jQuery.get将请求排队，直到网络连接可用
- 23. 离子2：离线HTTP获取请求
- 24. 尽可能快地发送HTTP请求
- 25. 使用Firebase存储发送网络请求PATCH时出错
- 26. 如何在离子中输入空时不发送请求
- 27. 发送HTTP请求（验证请求）
- 28. PHP：当网站在线托管时无法发送http请求
- 29. CIL如何使用网络/ http请求？
- 30. 在Adhoc网络上读取HTTP请求
入住此答案由其他用户： HTTP ：//stackoverflow.com/questions/27916953/ionic-check-internet-connection-using-cordova –
我正在使用多个控制器。我需要在每个控制器中使用相同的代码吗？ –