Ionic 3中HTTP Post/Get请求被触发两次的问题解决求助

我之前在Ionic 3开发时也碰到过一模一样的请求重复触发问题，结合你的代码和环境信息，给你几个靠谱的排查和解决方向：

1. 先给请求加个“防重复触发锁” #

从你的代码看，最直接的临时解决方案是加一个标志位，避免同一请求被多次调用。比如在当前组件里定义一个状态变量，请求开始时锁定，结束后释放：

// 组件内定义标志位
private isRequesting = false;

// 调用请求的逻辑里加上判断
if (!this.isRequesting) {
  this.isRequesting = true;
  this.httpService.post(this.APIs.getPGs, { userId: id }, result => {
    console.log("test");
    this.httpService.hideLoading();
    // 请求结束后解锁
    this.isRequesting = false;
    if (result.statusCode) {
      callback(result.data);
    } else {
      this.httpService.showAlert(result.message);
      callback(false);
    }
  });
}

2. 排查请求触发的源头 #

请求重复触发大概率是调用请求的逻辑被执行了两次，你可以从这几个方向查：

• 检查页面生命周期钩子：如果请求是放在ionViewWillEnter里，每次页面进入都会触发；如果是ionViewDidLoad，页面被销毁重建也会重复执行。确认你选择的生命周期钩子是否符合需求。
• 检查事件绑定：比如按钮点击事件，有没有在模板和代码里重复绑定？比如模板里写了(click)="getPGs()"，代码里又用addEventListener绑定了一次。

3. 检查自定义httpService的封装问题 #

你用了自己封装的httpService.post，很可能是封装内部出了问题：

• 有没有在封装里重复订阅了Observable？比如既返回了Observable，又手动调用了一次subscribe，同时外部还通过回调处理响应，导致两次请求。
• 检查post方法的实现，确保只调用了一次Angular的Http.post（Ionic 3用的是旧的Http模块，不是HttpClient），示例正确封装应该是这样：

// httpService里的post方法示例
post(url: string, data: any, callback: (result: any) => void) {
  this.http.post(url, data)
    .map(res => res.json())
    .subscribe(
      (response) => callback(response),
      (error) => callback({ statusCode: false, message: error.message })
    );
}

4. 排查HTTP拦截器（如果有） #

如果你的项目里自定义了HTTP拦截器，检查拦截器代码有没有不小心重复转发请求。比如拦截器里多次调用了next.handle(req)，这会导致请求被发送多次。正确的拦截器应该只转发一次请求：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 这里处理请求头、日志等逻辑
  // 只调用一次next.handle，不要重复调用
  return next.handle(req);
}

5. 排除CORS预检请求的干扰 #

最后可以打开浏览器的Network面板看一下：如果是一个OPTIONS请求加一个POST请求，那其实是浏览器的CORS预检机制，属于正常情况——但你的日志里打印了两次"test"，说明回调被执行了两次，所以这个可能性很小，不过还是可以确认一下。

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