Angular中如何仅在第一个服务/API调用成功执行后再调用另一个？

你需要先完善服务方法的类型定义与状态校验，再通过try/catch块包裹异步调用逻辑，即可实现前序接口成功后才执行后续接口的需求。

1. 改造服务方法 #

首先补全doSomething方法的参数类型、返回类型，也可以主动增加请求状态校验逻辑，提前抛出异常：

import { HttpClient, HttpResponse } from '@angular/common/http';
import { firstValueFrom } from 'rxjs'; // Angular 12+ 推荐替换toPromise使用

// 可根据实际业务调整返回结构定义
interface IApiResponse {
  code?: number;
  data?: any;
  msg?: string;
}

@Injectable({
  providedIn: 'root'
})
export class YourService {
  private path = '你的接口前缀';
  constructor(private http: HttpClient) {}

  // 补全入参类型，此处unknown可替换为你的实际提交参数类型
  doSomething(data: unknown): Promise<IApiResponse> {
    // Angular < 12 版本写法
    return this.http
      .post<IApiResponse>(`${this.path}dosomething`, data, { observe: 'response' })
      .toPromise()
      .then(res => {
        // 可自定义状态校验逻辑，不符合要求主动抛错
        if (res.status !== 200) {
          throw new Error('doSomething接口提交失败');
        }
        return res.body as IApiResponse;
      });

    // Angular >=12 版本推荐替换为firstValueFrom写法，toPromise已废弃
    /*
    return firstValueFrom(
      this.http.post<IApiResponse>(`${this.path}dosomething`, data, { observe: 'response' })
    ).then(res => {
      if (res.status !== 200) throw new Error('doSomething接口提交失败');
      return res.body as IApiResponse;
    });
    */
  }

  doAnotherThing(): Promise<any> {
    // 你的原有doAnotherThing逻辑
    return this.http.get(`${this.path}doAnotherThing`).toPromise();
  }
}

2. 业务逻辑处调用 #

在调用异步方法的外层函数必须加async修饰符，通过try/catch捕获异常，只要没有进入catch块就说明前序接口执行成功：

// 外层函数必须加async修饰符
async handleBusinessFlow() {
  try {
    // 等待doSomething执行完成，无报错则说明提交成功
    await servicesCalls.doSomething(你要提交的data参数);
    // 前序接口成功后才会执行下一行
    await serviceCalls.doAnotherThing();
    // 可继续写后续成功后的业务逻辑
  } catch (error) {
    // 任意接口报错都会进入此处，统一做错误处理
    console.error('业务流程执行失败：', error);
    // 可加错误提示、回滚操作等逻辑
  }
}

补充说明 #

• 后端返回的IHTTPACTIONRESULT类型的Ok()对应HTTP 200状态码，Angular的HttpClient默认会将2xx状态码的请求判定为成功，非2xx状态码会自动抛出异常，不需要额外判断即可直接通过try/catch捕获错误。
• 如果你后端是通过200状态码返回业务错误（比如响应体里code为非0代表失败），可以在服务方法的then逻辑里增加业务状态判断，不符合要求就主动抛出错误即可。

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