码迷,mamicode.com
首页 > Windows程序 > 详细

ionic 调用restful API services时全局错误处理的实现 或自定义错误处理的实现

时间:2018-06-24 00:46:55      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:alert   https   自定义   错误   终端   amp   地图   技术   otherwise   

往往我们的ionic程序需要调用API Service. 比如天气,地图等等。当这些API Service 不稳定或者不可访问时,我们可以通过在注册一个自定义的ErrorHandler, 来处理此类错误。

 

1.   将自定义错误处理类作为provider,  也就是Service.   在终端使用命令: ionic g provider GlobalErrorHandler .  ionic generate 命令行定义可以参考此处

2.     实现GlobalErrorHandler, 完整代码如下。

 import { ErrorHandler, Injectable } from ‘@angular/core‘;

import { AlertController } from ‘ionic-angular‘;

@Injectable()

export class GlobalErrorHandler extends ErrorHandler {

  constructor(public alertCtrl: AlertController) {

    super();

  }

  handleError(error: any): void {

     super.handleError(error);

    // IMPORTANT: Rethrow the error otherwise it gets swallowed

    if (error) {

      if (error.status === 0 && error.name === ‘HttpErrorResponse‘ && error.statusText === ‘Unknown Error‘) {

        this.showAlert(‘ 后台服务遇到了问题,目前正在修复中,请稍后访问,给您带来不便,深表歉意。‘);

        //It‘s better to add this to log file.

      }

    }

  }

  showAlert(subTitleText) {

    let alert = this.alertCtrl.create({

      title: ‘发生错误!‘,

      subTitle: subTitleText,

      buttons: [‘确定‘]

    });

    alert.present();

  }

}

3.   在 \src\app\app.module.ts 中注册 GlobalErrorHandler  . 以下是代码片段, 请关注粗体部分。

import { GlobalErrorHandler } from ‘../providers/global-error-handler/global-error-handler‘;

@NgModule({

  declarations: [...],

  imports: [...],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp 

  ],

  providers: [

     {provide: ErrorHandler, useClass: GlobalErrorHandler},

      //  IMP. GlobalErrorHandler should be here, otherwise it would not be triggered.

     GlobalErrorHandler

  ]

})

export class AppModule {}

 

这样的话,我们就在ionic程序中引入了全局错误处理。 一旦第三方的services 或者我们自己的service 发生错误不可访问时, 页面将会有Alert弹出。 如下图所示。

 

技术分享图片
 

ionic 调用restful API services时全局错误处理的实现 或自定义错误处理的实现

标签:alert   https   自定义   错误   终端   amp   地图   技术   otherwise   

原文地址:https://www.cnblogs.com/caiyaming/p/9219126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!