Angular/TypeScript Promise执行顺序异常问题求助

看起来你遇到了Promise执行顺序不符合预期的问题——finished先打印，而api response后出现。这大概率是因为checkNewVersion返回的Promise不是当前API请求对应的Promise，而是一个已经resolve的旧Promise，甚至可能是undefined（导致then回调被错误地同步执行）。让我们一步步修复这个问题：

问题根源分析 #

你的checkNewVersion方法逻辑里，当force || shouldCheck()为false时，直接返回this.checkPromise。如果这是第一次调用且不需要检查版本，this.checkPromise还未初始化（是undefined），这会导致then方法调用在非Promise对象上，浏览器可能会将其当作同步代码执行；另外，如果this.checkPromise是之前已经resolve的旧Promise，后续调用会直接触发then回调，而此时如果有新的API请求正在进行，就会出现顺序颠倒的情况。

修复后的代码 #

修改version-checker.ts #

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { ApiService } from './api-service';

export interface CheckResult {
  latest: boolean;
}

@Injectable()
export class VersionChecker {
  // 初始化checkPromise为null，明确区分是否有正在进行的请求
  private checkPromise: Promise<CheckResult> | null = null;

  constructor(private platform: Platform, private api: ApiService) {}

  public checkNewVersion(force?: boolean): Promise<CheckResult> {
    let platformType = this.platform.is("ios") ? 'ios' : 'android';
    
    // 仅当强制检查，或者需要检查且无正在进行的请求时，发起新请求
    if (force || (this.shouldCheck() && !this.checkPromise)) {
      this.checkPromise = this.api.post('check-version', {
        platform: platformType,
        version: '0.2.1'
      }).then(response => {
        console.log('api response');
        // 请求完成后重置checkPromise，允许下次重新检查
        this.checkPromise = null;
        return { latest: response.latest };
      }).catch(error => {
        // 出错时也重置checkPromise
        this.checkPromise = null;
        throw error; // 传递错误给上层处理
      });
    }

    // 确保始终返回有效的Promise：有请求则返回请求Promise，否则返回默认结果
    return this.checkPromise || Promise.resolve({ latest: false });
  }

  private shouldCheck(): boolean {
    // 替换为你的实际检查逻辑（比如基于时间间隔）
    return true;
  }
}

完善api-service.ts的错误处理 #

确保handleError返回rejected的Observable，避免Promise意外resolve：

private handleError(err: Response, obs: Observable<any>): Observable<any> {
  console.error('API请求出错:', err);
  // 返回抛出错误的Observable，toPromise()会转为rejected的Promise
  return Observable.throw(err);
}

更新page.ts的错误处理（可选） #

为了更健壮，添加错误捕获逻辑：

public ionViewDidLoad() {
  this.platform.ready()
    .then(() => {
      this.versionChecker.checkNewVersion()
        .then(response => {
          console.log('finished')
        })
        .catch(error => {
          console.error('版本检查失败:', error);
        });
    });
}

关键修改点说明 #

1. 明确Promise状态：将checkPromise初始化为null，清晰区分是否有正在进行的API请求，避免重复发起请求。
2. 保证返回有效Promise：当不需要检查且无正在进行的请求时，返回一个默认的resolve Promise，确保then方法始终能正确调用。
3. 请求完成后重置状态：无论请求成功或失败，都将checkPromise重置为null，这样后续的版本检查可以正常发起新请求。
4. 避免重复请求：仅在没有正在进行的请求时才发起新请求，防止同一时间多个版本检查请求并发。

这样修改后，就能保证api response会在finished之前打印，完全符合你的预期。

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