Angular与Ionic2中如何等待http.get()响应并处理登录验证？

我完全懂你碰到的这个异步痛点——HTTP调用本身就是异步执行的，直接在调用后就去拿结果肯定会踩坑，不管用Observable还是Promise，核心都是得等异步操作完成后再处理返回值，下面分别给你拆解两种方案的正确用法：

一、Observable的正确处理方式 #

你现在的问题是把console.log(this.usuario)写在了subscribe外面，这时候请求还没完成，this.usuario自然是undefined；第二次点击时，上一次的请求已经返回，所以拿到的是旧值。

正确的做法是把所有依赖请求结果的逻辑都放在subscribe的回调函数里，或者用async/await配合Observable转Promise的方式：

方案1：在subscribe回调内处理结果 #

login() {
  this.loginservice.get_usuario(this.loginusuario).subscribe(
    response => {
      this.usuario = response;
      // 所有需要用到usuario的逻辑都必须放在这里！
      console.log(this.usuario); // 这里就能拿到最新的返回值了
      // 比如跳转到首页、存储用户信息等后续操作
    },
    error => {
      // 别忘了处理请求失败的情况
      console.error('登录请求失败', error);
    }
  );
}

方案2：用async/await配合toPromise（更贴近同步代码写法） #

如果习惯同步代码的逻辑，可以把Observable转成Promise，然后用async/await来等待结果：

// 服务方法保持不变（或者在调用时转也可以）
public get_usuario(usuario): Observable<any> {
  return this.http.get(`${this.urlusuario}/${usuario.usuario}/${usuario.senha}`);
}

// 登录方法改成async函数
async login() {
  try {
    this.usuario = await this.loginservice.get_usuario(this.loginusuario).toPromise();
    console.log(this.usuario); // 这里能直接拿到正确的结果
    // 后续业务逻辑写在这里
  } catch (error) {
    console.error('登录失败', error);
  }
}

二、Promise的正确处理方式 #

你现在直接把this.usuario赋值为Promise对象，所以console.log看到的是Promise的内部属性（比如__zone_symbol__value），而不是实际的返回值。要获取Promise的结果，必须用.then()回调或者async/await：

方案1：用then回调处理结果 #

login() {
  this.loginservice.get_usuario(this.loginusuario)
    .then(data => {
      this.usuario = data;
      console.log(this.usuario); // 这里能拿到真实的返回对象
      // 后续业务逻辑写在这里
    })
    .catch(error => {
      console.error('登录请求失败', error);
    });
}

方案2：用async/await简化写法 #

和Observable的方案类似，把login方法改成async函数：

async login() {
  try {
    this.usuario = await this.loginservice.get_usuario(this.loginusuario);
    console.log(this.usuario); // 直接拿到请求返回的结果
  } catch (error) {
    console.error('登录失败', error);
  }
}

另外给你提个安全建议：把用户名和密码直接拼在URL里（/"+ usuario.usuario +"/"+ usuario.senha）是非常不安全的，建议改成POST请求，把参数放在请求体里，避免密码暴露在URL和服务器日志中！

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