Ionic 3中无法在Cordova原生HTTP请求回调内创建Alert求助

你碰到的这个TypeError: Cannot read property 'alertCtrl' of undefined问题，核心原因是Cordova插件的回调函数改变了this的上下文——普通回调函数执行时，this指向的是插件内部的上下文，而不是你的Angular/Ionic组件实例，所以自然拿不到组件里注入的alertCtrl。

下面给你三种可行的解决方案，挑你习惯的方式来用：

方案1：用箭头函数绑定组件上下文 #

箭头函数会自动继承外部作用域的this，直接把回调换成箭头函数就能解决问题：

cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, 
  (response) => {
    try {
      // 成功回调逻辑，比如解析响应
      response.data = JSON.parse(response.data);
      // ...其他操作
    } catch (e) {
      console.error('解析响应出错:', e);
    }
  }, 
  (error) => {
    // 这里的this已经是组件实例了，可以正常调用alertCtrl
    this.alertCtrl.create({
      header: '请求失败',
      message: error.error || '网络异常，请稍后重试',
      buttons: ['确定']
    }).then(alert => alert.present());
  }
);

方案2：提前保存组件的this到变量 #

如果更习惯用普通函数回调，可以先把组件的this存到一个变量里，比如self，在回调里用这个变量访问组件属性：

// 先把组件的this存起来
const self = this;
cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, 
  function(response) {
    try {
      response.data = JSON.parse(response.data);
      // ...成功逻辑
    } catch (e) {
      console.error(e);
    }
  }, 
  function(error) {
    // 用self代替this，就能访问组件的alertCtrl了
    self.alertCtrl.create({
      header: '登录失败',
      message: error.status + ': ' + error.error,
      buttons: ['关闭']
    }).then(alert => alert.present());
  }
);

方案3：用Promise包装+async/await简化代码 #

把Cordova的回调式请求包装成Promise，再用async/await结合try-catch处理，代码会更简洁易读，而且this的上下文也不会乱：

async handleLogin() {
  try {
    // 把sendRequest包装成Promise
    const response = await new Promise((resolve, reject) => {
      cordova.plugin.http.sendRequest('http://127.0.0.1:5000/api/login/', options, resolve, reject);
    });
    // 成功逻辑
    response.data = JSON.parse(response.data);
    // ...后续操作比如跳转到首页
  } catch (error) {
    // 这里的this还是组件实例，直接调用alertCtrl
    const alert = await this.alertCtrl.create({
      header: '请求出错',
      message: error.message || '无法连接到服务器',
      buttons: ['确定']
    });
    await alert.present();
  }
}

额外注意 #

确保你的组件已经正确注入了AlertController，比如在构造函数里声明：

constructor(private alertCtrl: AlertController) {}

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