angular怎么查询离线和在线

Question

当浏览处于离线模式时，我从服务调用中收到错误。 当浏览器处于离线模式时，如何检查离线模式并想阻止我的服务调用？

Answer 1

我建议你使用Offline.js

他们有模板和其他东西可以使用。 你可以查看他们的文档 ，看看它是如何工作的。

它通过返回“向上”或“向下”结果来获取连接的当前状态，或者您可以绑定和事件到它并在您的应用程序中使用它。

这就是他们对图书馆的看法：

Offline.js是一个图书馆，可以在用户丢失互联网连接时自动提醒用户，例如Gmail。

它捕获在连接断开时创建的AJAX请求，并在备份时重新创建它们，因此您的应用程序反应完美。

它有许多漂亮的主题，不需要配置。

祝好运并玩得开心点。

Answer 2

检查navigator.onLine并根据此值决定是否发送请求。

if (navigator.onLine) {
    $http.get('url').success(function() {});
}
else {
    // no req
}

角度方式：

使用$q service - 一种帮助您异步运行函数的服务，并在完成处理时使用它们的返回值（或异常）。 https://docs.angularjs.org/api/ng/service/ $ q

我知道的最好的方法是截取HTTP处理程序，如果它是401/501 /等，然后根据它来处理它

angular.module('myApp', ['myApp.services'], 
    function ($httpProvider) {

    var interceptor = ['$rootScope', '$q', function ($rootScope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status; // error code

            if ((status >= 400) && (status < 500)) {
                $rootScope.broadcast("AuthError", status);
                return;
            }

            if ( (status >= 500) && (status < 600) ) {
                $rootScope.broadcast("ServerError", status);
                return;
            }

            // otherwise
            return $q.reject(response);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

然后在你的代码中监听on，只需添加

$rootScope.$on("ServerError", someServerErrorFunction);

来源： 如何检测在线/离线状态何时发生变化

Answer 3

在线/离线检测不能 100% 准确地决定，因为网络状态可能因多种原因而变化。

尽管如此，如果您想要使用 Angular+NGRX 实现相同的实现，您可以在此处找到更多详细信息。

https://hackernoon.com/using-angular-to-detect.network-connection-status-onlineoffline

import { Component, OnDestroy, OnInit, VERSION } from '@angular/core';

import { fromEvent, merge, of, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  networkStatus: boolean = false;
  networkStatus$: Subscription = Subscription.EMPTY;

  constructor() {}

  ngOnInit(): void {
    this.checkNetworkStatus();
  }

  ngOnDestroy(): void {
    this.networkStatus$.unsubscribe();
  }

  checkNetworkStatus() {
    this.networkStatus = navigator.onLine;
    this.networkStatus$ = merge(
      of(null),
      fromEvent(window, 'online'),
      fromEvent(window, 'offline')
    )
      .pipe(map(() => navigator.onLine))
      .subscribe(status => {
        console.log('status', status);
        this.networkStatus = status;
      });
  }
}

你可以在这里看到演示。

或在此处查看代码

编码快乐！！！