javascript - HttpClient 和 Rxjs

Question

我正在研究一种情况，在网络连接期间，我们有时可能会受到有限的互联网连接的影响，导致我们无法从服务器获取响应或响应失败(如 HttpError)。我特此尝试每秒 ping 该 URL 以检查我们是否收到响应，为此

我正在尝试这段代码，这在在线方法中运行良好，但是当我打开互联网时，它不会返回错误值。

fetch-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Posts } from './posts';
import { Observable, interval, throwError, of } from 'rxjs';
import { take, exhaustMap, map, retryWhen, retry, catchError, tap, mapTo, } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FetchDataService {

  public url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private _httpClient: HttpClient) { }

  getData() {
    const ob = interval(1000);
    return ob.pipe(
      exhaustMap(_ => {
        return this._httpClient.get<Posts[]>(this.url, { observe: 'response' });
      }),
      map(val => {
        if (val.status === 200)
          return true;
        throw val;
      }),
      retryWhen(errors => {
        return errors.pipe(map(val => {
          if (val.status === 0)
            return false;
        }))
      })
    );
  }


  // private handleError(error: HttpErrorResponse) {
  //   if (error.error instanceof ErrorEvent) {
  //     // A client-side or network error occurred. Handle it accordingly.
  //     console.error('An error occurred:', error.error.message);
  //   } else {
  //     // The backend returned an unsuccessful response code.
  //     // The response body may contain clues as to what went wrong,
  //     console.error(
  //       `Backend returned code ${error.status}, ` +
  //       `body was: ${error.error}`);
  //     if (error.status !== 200)
  //       return of(false);
  //   }
  //   // return an observable with a user-facing error message
  //   return throwError(
  //     'Something bad happened; please try again later.');

  // };

}

pulldata.component.html

import { Component, OnInit } from '@angular/core';
import { FetchDataService } from '../fetch-data.service';
import { Observable } from 'rxjs';
import { Posts } from '../posts';

@Component({
  selector: 'app-pulldata',
  templateUrl: './pulldata.component.html',
  styleUrls: ['./pulldata.component.css']
})
export class PulldataComponent implements OnInit {

  public data;
  public error = '';

  constructor(private _fecthDataServe: FetchDataService) { }

  ngOnInit() {
    this._fecthDataServe.getData().subscribe(val => {
      this.data = val;
      console.log(this.data);
    });

  }

}

以这种方式检查互联网连接的最佳解决方案是什么？

Answer 1

由于数据开销，我个人偏好不使用 HTTP 执行此操作。每个 HTTP 请求都将包含 cookie 数据和其他 header ，这些 header 在此类场景中通常无用。

您可以使用Web Sockets吗？ ？通过这些，您可以打开与服务器的连接，与 HTTP 不同，该连接不必关闭。它可以永远保持开放。您还可以订阅事件以获取有关连接丢失的通知。 Web Sockets 还有一个额外的好处，它是基于 TCP 的新协议(protocol)，而不是 HTTP，因此需要发送的网络数据要少得多。

let socket = new WebSocket('wss://yourserver/socket...');
socket.addEventListener('open', () => console.log('connection has been opened'));
socket.addEventListener('close', () => console.log('connection has been closed'));

根据您的情况，您可能还想查看the Reconnecting WebSocket ，当连接断开时重新连接。当然，您也可以自己编写这个小包装。

此外，还有一个更简单的解决方案。您可以在window对象上订阅online/offline事件:read more on MDN

function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    // ...do something with the new status
}

window.addEventListener('online',  updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

这两种解决方案都应该可以轻松包装在 Angular 服务中，但请告诉我这是否有效和/或这些解决方案是否适合您。