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 –
我正在使用多個控制器。我需要在每個控制器中使用相同的代碼嗎？ –