无法 return 从 httpclient post 函数响应到 angular 中的其他自定义函数 4

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 将 return 据我所知，您可以观察到它并在订阅方法中记录响应，因此在组件中您可能无法正确接收内容，因为调用未完成，因此您需要这样做

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 这就是为什么这是 undefined.

要使其正常工作，您必须使用 promise 或 observable。

无法 return 从 httpclient post 函数响应到 angular 中的其他自定义函数 4

Can't return response from httpclient post function to other custom function in angular 4

httpclient

typescript

angular

angular4-httpclient