Question

我创建了此auth-api.ts服务，具有登录方法：

login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');


    const httpParams = new HttpParams()
      .set('username', username)
      .set('password', password);

    return this.http.post('http://dev.local/scripts/login.php', httpParams,  {
      headers: headerOptions
    }).pipe(map(
        res=>{
          console.log('user '+res)
        },
        err=>
          console.log(err)
      ))
  }

单击按钮时，将使用以下方法在login.component.ts内部调用此方法：

login(){
    const user = this.loginGroup.get('username').value;
    const pass = this.loginGroup.get('password').value;

    this.auth.login(user, pass).subscribe(
      (data)=>{
        console.log(data);
        this.loginGroup.reset();
      },
      (error)=>{
        console.log(error)
      }
    )
  }

问题是api登录方法中的console.log(res)返回值，而第二个登录方法中的`console.log（data）返回未定义。

我想要在data上做一些条件，所以这就是为什么我不能这样做。

Answer 1

如果您想返回结果并将结果记录在控制台中，请使用tap运算符而不是map

return this.http.post('http://dev.local/scripts/login.php', httpParams,  {
  headers: headerOptions
}).pipe(tap(
    res=>{
      console.log('user '+res)
    },
    err=>
      console.log(err)
  ))

Answer 2

卸下管道。您正在将响应映射到console.log（），这就是为什么在组件中未定义的原因。

还可以处理组件中的错误。

login(username, password)
  {
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');


const httpParams = new HttpParams()
  .set('username', username)
  .set('password', password);

return this.http.post('http://dev.local/scripts/login.php', httpParams,  {
  headers: headerOptions
});
}

简单来说，管道用于转换您的输出。在这里，映射运算符将您的响应映射到方法或某个表达式，以获取所需的输入。如果假设您的回答返回2，那么如果我回答了，

map(response => response * 2)，

您的组件将在subscription方法中将数据获取为4。我建议您通过google获取更多信息。

Answer 3

**try this**

let headers = new Headers();
    headers.set('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post('http://dev.local/scripts/login.php',httpParams,  { headers: this.headers }).toPromise();

Angular 6 HttpClient响应返回未定义

3 个答案: