Ionic中HttpClient请求后toastCtrl未定义问题求助

嘿，这个错误我太熟了！核心问题就是Promise回调里的this指向不对。你看，在then(function(data) { ... })里用的是普通函数，这个函数里的this并不是你的LoginComponent实例，而是Promise回调的上下文，自然找不到this.toastCtrl。而你之前在无服务调用的函数里能正常用Toast，是因为那些函数里的this直接指向组件本身。

给你两种简单的解决办法，任选其一就行：

方法1：改用箭头函数（推荐） #

箭头函数会自动继承外层上下文的this，完美解决指向问题。修改你的login方法如下：

login(form: ngForm){
  this.AuthService.login(form.value.email, form.value.password)
  .then((data) => { // 把普通函数改成箭头函数
    if(data.success == true){
      localStorage.setItem('userToken',data.token);
      localStorage.setItem('userData',JSON.stringify(data.user));
    }else{
      let toast = this.toastCtrl.create({
        message: data.error,
        duration: 3000
      });
      toast.present();
    }
  })
  .catch((error) => { // catch里也改成箭头函数
    console.log(error);
    // 这里可以加个统一的错误提示
    let toast = this.toastCtrl.create({
      message: '登录请求失败，请稍后重试',
      duration: 3000
    });
    toast.present();
  })
}

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

如果你习惯用普通函数，可以在函数开头把组件的this存起来，之后用这个变量代替this：

login(form: ngForm){
  const self = this; // 先把组件的this存到self里
  this.AuthService.login(form.value.email, form.value.password)
  .then(function(data) {
    if(data.success == true){
      localStorage.setItem('userToken',data.token);
      localStorage.setItem('userData',JSON.stringify(data.user));
    }else{
      let toast = self.toastCtrl.create({ // 用self代替this
        message: data.error,
        duration: 3000
      });
      toast.present();
    }
  })
  .catch(function(error) {
    console.log(error);
    let toast = self.toastCtrl.create({
      message: '登录请求失败，请稍后重试',
      duration: 3000
    });
    toast.present();
  })
}

额外优化：简化AuthService的login方法 #

你的AuthService里手动包了一层Promise，其实可以直接把HttpClient的Observable转成Promise，代码更简洁：

修改auth.ts里的login函数：

login(email : string, password :string){
  const body = {email : email, password : password};
  // 直接用toPromise转换，不用手动创建Promise
  return this.http.post(this.loginUrl, body).toPromise();
}

这样既减少了冗余代码，也避免了手动管理Observable的订阅逻辑。

试一下上面的修改，应该就能正常弹出Toast啦！

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