Angular 4 HTTP Post请求无法触发问题求助

嘿，刚上手Angular 4就碰到HTTP请求的坑，太懂这种摸不着头脑的感觉了！结合你说的情况——URL没问题、手动Fiddler能通但应用里没请求记录，大概率是这几个原因，咱们一步步排查：

1. 最常见的坑：Observable没被订阅 #

Angular的HTTP请求返回的是冷Observable，意思是只有当你调用.subscribe()并且完整传入回调时，请求才会真正发送出去！看你代码里写了.subscri...，会不会是没写完订阅逻辑？比如只写了一半，或者漏了订阅？

举个正确的组件调用例子：

getSanitationTasks() {
  this.sanitationProvider.getSanitationTasks()
    .subscribe(
      (response) => {
        console.log('请求成功返回:', response);
      },
      (error) => {
        console.error('请求出错了:', error);
      }
    );
}

一定要确保subscribe()方法完整调用，哪怕你不需要处理返回值，至少也要写空的回调：.subscribe()（不过更推荐加错误处理，方便排查问题）。

2. Post请求的body参数问题 #

虽然你的接口不需要请求体，但Angular的post方法默认要求第二个参数是body。如果你直接省略或者传undefined，有些版本的Angular 4会出现请求不发送的情况。正确的做法是显式传null作为body参数。

看看你的Provider里的实现是不是这样：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class SanitationProvider {
  constructor(private http: Http) {}

  getSanitationTasks(): Observable<any> {
    const apiUrl = '你的正确URL';
    // 显式传入null作为body，同时根据接口要求设置headers
    const headers = new Headers({
      'Content-Type': 'application/json' // 如果接口需要别的header就调整
    });
    return this.http.post(apiUrl, null, { headers: headers })
      .map(res => res.json());
  }
}

3. 检查模块是否正确导入 #

别忘了在你的AppModule里导入HttpModule，否则Angular的HTTP服务根本无法工作：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http'; // 必须导入这个
import { AppComponent } from './app.component';
import { SanitationProvider } from './sanitation.provider';

@NgModule({
  imports: [BrowserModule, HttpModule],
  declarations: [AppComponent],
  providers: [SanitationProvider],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 用浏览器开发者工具辅助排查 #

有时候Fiddler可能因为代理设置没抓到请求，你可以打开浏览器的Network标签（按F12），刷新页面或者触发请求，看看有没有对应的POST请求记录。如果这里也没有，那肯定是代码没触发请求；如果有，看看请求的状态码和错误信息，能帮你更快定位问题。

额外排查点：跨域问题？ #

虽然你手动Fiddler能发，但如果你的Angular应用和接口不在同一个域名下，可能存在跨域问题。不过这种情况浏览器会先发送OPTIONS预检请求，Fiddler应该能抓到。如果是跨域，需要后端配置CORS允许你的应用域名访问。

按照上面的步骤排查，应该能解决你的问题！

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