Angular 4中HTTP请求调用toPromise时map函数未执行问题咨询

你的问题核心是rxjs操作符没有正确导入，导致map没有生效，最终toPromise()返回的是包裹原始Response对象的Promise，而非解析后的JSON。下面一步步帮你解决：

1. 先导入必要的rxjs操作符 #

Angular 4使用的是旧版rxjs（非pipeable操作符），所有操作符需要手动导入才能生效。在你的认证服务文件顶部添加：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

如果不导入这些操作符，map方法实际上不会对Observable做任何转换，相当于直接把原始的Observable<Response>转成了Promise<Response>——这就是你需要手动解析JSON的原因。

2. 修正服务中的login方法 #

确保你的login方法正确处理响应并返回解析后的JSON的Promise：

login(credentials): Promise<any> {
  // 假设你已经正确构造了params和requestOptions
  return this.http.post(this.signInURL, params.toString(), requestOptions)
    .map(res => {
      const parsedJson = res.json();
      console.log('解析后的响应:', parsedJson);
      return parsedJson;
    })
    .toPromise()
    // 建议添加错误处理，避免未捕获的Promise异常
    .catch(error => {
      console.error('登录请求出错:', error);
      return Promise.reject(error);
    });
}

3. 组件中正确使用await #

记得调用login的组件方法必须标记为async，否则await会报错：

async handleLogin(credentials) {
  try {
    const response = await this.authenticationService.login(credentials);
    console.log('组件中拿到的响应:', response); // 这里直接是解析好的JSON对象
    // 后续处理逻辑...
  } catch (error) {
    // 处理登录失败的情况
    console.error('登录失败:', error);
  }
}

这样修改后，map里的console.log应该能正常输出，await拿到的也会是已经解析好的JSON对象，不需要再手动转换了。

内容的提问来源于stack exchange，提问作者RoHaN