代码之家 › 专栏 › 技术社区 › Suresh Kumar Dhayal

无法将httpclient post函数的响应返回给angular 4中的其他自定义函数

angular4-httpclient httpclient typescript angular

Suresh Kumar Dhayal · 技术社区 · 7 年前

我有 addUser(newUser) 登录功能。服务ts文件如下

addUser(newUser)
  {
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
    let body = JSON.stringify(newUser);
    this.httpclient.post('http://localhost:3000/api/signup', body, httpOptions).subscribe(res=>{
      console.log(res);
      return res;
    });
  }

这里控制台的输出是 {msg: "succesfully added", status: 200} 但是当我打电话给上面的人 addUser(新用户) 登录功能。组成部分ts文件如下

  addUser()
  {
    console.log(this.first_name,this.last_name,this.userName,this.email);
    let newUser = {
      "first_name":this.first_name,
      "last_name":this.last_name,
      "username":this.userName,
      "email":this.email
    }
    console.log(this.signService.addUser(newUser));
  }

显示控制台输出 undefined 。为什么?请帮帮我。非常感谢。

3 回复 | 直到 7 年前

Pranay Rana 7 年前

据我所知,httpclient将返回可观察的结果,它将响应记录在subscribe方法中,所以在组件中,由于调用未完成,您可能无法正确接收到内容,所以您需要这样做

addUser(newUser) : Observable<any>
  {
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
    let body = JSON.stringify(newUser);
    return this.httpclient.post('http://localhost:3000/api/signup', body, httpOptions);
  }

 //make use of async/awit , so you will get response properly 
 async addUser()
  {
    console.log(this.first_name,this.last_name,this.userName,this.email);
    let newUser = {
      "first_name":this.first_name,
      "last_name":this.last_name,
      "username":this.userName,
      "email":this.email
    }
    const datareturned = await this.signService.addUser(newUser).toPromise();
    console.log(datareturned);
  }

或者,如果您不想使用async/await,您应该在组件中订阅observable。ts文件

addUser()
  {
    console.log(this.first_name,this.last_name,this.userName,this.email);
    let newUser = {
      "first_name":this.first_name,
      "last_name":this.last_name,
      "username":this.userName,
      "email":this.email
    }
   this.signService.addUser(newUser).subscribe(d=> console.log(d));
  }

服务文件

addUser(newUser) : Observable<any>
  {
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
    let body = JSON.stringify(newUser);
    return this.httpclient.post('http://localhost:3000/api/signup', body, httpOptions);
  }

Rahul Sharma 7 年前

组件代码不会等待服务调用完成。

// sign-in.service.ts
addUser(newUser) {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };
    let body = JSON.stringify(newUser);
    return this.httpclient.post('http://localhost:3000/api/signup', body, httpOptions)
}

// Component
addUser() {
    console.log(this.first_name, this.last_name, this.userName, this.email);
    let newUser = {
        "first_name": this.first_name,
        "last_name": this.last_name,
        "username": this.userName,
        "email": this.email
    }
    this.signService.addUser(newUser).subscribe(res => {
        console.log(res);
        return res;
    });
}

Pranay Rana 7 年前

因为。。。

console.log 不是 async 但是你的 http 服务是,所以当 安慰日志 已执行您的服务仍在等待 response 这就是为什么 undefined 。

要让它工作,你必须使用 promise 或 observable 。