使用Ionic Native Network插件检测网络并发起服务器请求的问题

看起来你已经迈出了第一步，导入了Network插件并准备监听网络状态，我来帮你把整个逻辑补全，实现「检测网络连接存在时发起服务器请求」的需求：

1. 先确认基础配置没问题 #

首先得确保插件已经正确安装并配置：

# 安装cordova插件和npm包
ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

然后在app.module.ts里把Network加入providers：

import { Network } from '@ionic-native/network/ngx';

@NgModule({
  ...
  providers: [
    // 其他providers
    Network
  ]
})
export class AppModule {}

2. 完善LoginPage的代码逻辑 #

下面是完整的LoginPage代码，包含网络状态监听、初始检查、请求触发的逻辑：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { Auth } from '../../providers/auth/auth';
import { Network } from '@ionic-native/network';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  isConnected: boolean = false;
  // 保存订阅实例，页面销毁时要取消，避免内存泄漏
  connectSub: any;
  disconnectSub: any;

  constructor(
    private network: Network,
    private alertCtrl: AlertController,
    public navCtrl: NavController,
    public navParams: NavParams,
    public authService: Auth,
    public loadingCtrl: LoadingController
  ) {
    // 页面初始化时先检查当前网络状态
    this.checkNetworkStatus();
  }

  ionViewDidLoad() {
    // 监听网络连接事件
    this.connectSub = this.network.onConnect().subscribe(() => {
      console.log('网络已连接');
      this.isConnected = true;
      this.showAlert('网络恢复', '现在可以正常发起请求了');
      // 如果你需要自动发起请求，这里直接调用请求方法就行
      // this.sendServerRequest();
    });

    // 监听网络断开事件
    this.disconnectSub = this.network.onDisconnect().subscribe(() => {
      console.log('网络断开');
      this.isConnected = false;
      this.showAlert('网络异常', '请检查你的网络连接状态');
    });
  }

  // 检查当前网络状态
  checkNetworkStatus() {
    const networkType = this.network.type;
    // network.type返回'none'就是无网络，其他值都是有网状态
    this.isConnected = networkType !== 'none';
    if (!this.isConnected) {
      this.showAlert('无网络', '请先连接网络再进行操作');
    }
  }

  // 发起服务器请求的示例方法（比如登录请求）
  sendServerRequest(loginData: any) {
    if (!this.isConnected) {
      this.showAlert('提示', '当前无网络，无法发起请求');
      return;
    }

    const loader = this.loadingCtrl.create({
      content: '正在处理请求...'
    });
    loader.present();

    // 调用你的Auth服务中的请求方法，这里假设是login方法
    this.authService.login(loginData)
      .subscribe(
        res => {
          loader.dismiss();
          console.log('请求成功', res);
          // 请求成功后的逻辑，比如跳转到主页
          this.navCtrl.push('HomePage');
        },
        err => {
          loader.dismiss();
          console.error('请求失败', err);
          this.showAlert('请求失败', err.message || '服务器请求出错，请稍后重试');
        }
      );
  }

  // 封装的提示框方法
  showAlert(title: string, msg: string) {
    const alert = this.alertCtrl.create({
      title,
      message: msg,
      buttons: ['确定']
    });
    alert.present();
  }

  // 页面销毁时取消订阅，防止内存泄漏
  ionViewWillUnload() {
    if (this.connectSub) this.connectSub.unsubscribe();
    if (this.disconnectSub) this.disconnectSub.unsubscribe();
  }

  // 比如登录按钮的点击事件，先检查网络再发起请求
  onLoginButtonClick(loginFormData: any) {
    this.sendServerRequest(loginFormData);
  }
}

3. 几个关键细节要注意 #

• 初始网络检查：页面加载时就检查网络状态，避免用户在无网状态下盲目操作；
• 订阅清理：一定要在ionViewWillUnload里取消网络监听的订阅，不然会造成内存泄漏；
• 请求触发时机：你可以选择网络恢复时自动发起请求，或者像上面示例一样，在用户点击按钮时先检查网络再发起请求，根据你的业务需求来选；
• 网络类型判断：this.network.type还能返回具体的网络类型（比如wifi、4g、3g），如果你的业务需要区分网络类型，也可以在这里做判断。

这样整个流程就完整了，既能实时监听网络状态，又能确保只有在有网时才发起服务器请求~

内容的提问来源于stack exchange，提问作者user8231819