Question

我在sign-in.service.ts文件中有addUser(newUser)函数，如下所示

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} 但是当我从sign-in.component.ts文件中调用上面的addUser(newUser)函数时，如下所示

  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。为什么？请帮我。谢谢。

Answer 1

httpclient会根据我的知识返回你的observable并且它会在订阅方法中记录响应，因此在组件中你可能无法正常接收内容，因为调用未完成，所以你需要这样做

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，你应该在component.ts文件中包含observable

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);
  }

Answer 2

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

// 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;
    });
}

Answer 3

这是因为......

console.log不是async，而是http服务，因此当console.log执行时，您的服务仍在等待response的{{1}}。为什么它是undefined。

要使其有效，您必须使用promise或observable。

无法将httpclient post函数的响应返回到角度4

3 个答案: