javascript - angular2 http在点击事件下，第一次点击为undefined，第二次才能获得值

问题描述

问 题

angular2 http在点击事件下，第一次点击为undefined，第二次才能获得值,这个是什么原因，如何实现，每点击一次，都显示不同的值？

就比如下面的代码中，okLogin()我已经获得了name和password，我将返回的data赋值给this.result，然后在当点击事件发生后执行isLogin()，isLogin则会执行okLogin。但是我发现，我点击第一次的时候，result尽然是undefined，点击第二次的时候可以得到result，但是当result值发生变化后，第一次点击仍然是打印出了前一个值，并不是当前获得的值。请问该怎么解决？

okLogin(){
    this.http.get('http://localhost:3000/api/users/login/'+this.Name+'/'+this.Pwd+'')
      .map(res => res.json())
      .subscribe(
        data => this.result=data,
        err => console.error(err),
        () => console.log('done')
      );
  return this.result
  }

isLogin(event){
    if(this.Name===''||this.Name===undefined&&this.Pwd===''||this.Pwd===undefined){
      this.check = true;
    }
    this.check = false;
    this.okLogin();
    // this.result = this.okLogin();
    console.log(this.result);
    if(this.result===true){
      console.log('登录成功')
    }else{
      console.log('发生错误')
    }

打印出来的效果：
undefined
{data的数据}

之前我初始化了result的值，但是后面当传入的用户名和密码发生变化时，http.get数据已经发生了变化，但是result却还是之前的值，需要第二次点击后才正确显示。

以前我做count++的时候也遇到这个问题，只不过自加当时是直接从0开始，而我不想看到0，只想让他从1开始，因此我就给count设置了默认值为1

解决方案

okLogin()方法写的是有问题的。 subscribe是存在异步行为的。所以在调用okLogin的时候就会出现this.result还没有被赋值，isLogin会继续执行。

修改方案：

(1)Promise方式
(2)修改subcribe写法

okLogin(){
    return this.http.get('http://localhost:3000/api/users/login/'+this.Name+'/'+this.Pwd+'')
      .map(res => res.json());
  }

isLogin(event){
    if(this.Name===''||this.Name===undefined&&this.Pwd===''||this.Pwd===undefined){
      this.check = true;
    }
    this.check = false;
    this.okLogin().subcribe(data=>{
        this.result = data;
        if(data===true){
          console.log('登录成功')
        }else{
          console.log('发生错误')
        }
    })
    

这篇关于javascript - angular2 http在点击事件下，第一次点击为undefined，第二次才能获得值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！