Angular中如何通过单个函数同时调用多个API接口发起请求

JavaScript/TypeScript 函数在执行到第一个return语句时会立刻终止运行、返回对应值，后续的代码永远不会被执行，因此你写的第二个接口调用逻辑永远不会触发。

Angular HttpClient 返回的是 RxJS Observable 对象，要同时发起两个请求、等待所有请求完成后统一返回结果，直接使用 RxJS 内置的forkJoin操作符即可，它会并行发起所有传入的请求，待全部请求成功响应后，将结果按传入格式合并返回。

1. 首先在服务文件顶部引入依赖：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// 新增引入forkJoin
import { forkJoin } from 'rxjs';

2. 修改loginDone方法实现：

loginDone(ldata:any){
  return forkJoin({
    // 登录接口请求
    loginResult: this.http.post(this.url2, ldata),
    // 发送OTP接口请求
    sendOtpResult: this.http.post(this.url3, ldata)
  });
}

组件调用示例 #

在登录组件中调用该服务方法时，正常订阅即可拿到两个接口的返回结果：

// 组件中调用
this.userdataService.loginDone(formData).subscribe({
  next: (res) => {
    // 直接通过key取对应接口的返回值，不需要记返回顺序
    const loginInfo = res.loginResult;
    const otpInfo = res.sendOtpResult;
    // 编写后续登录成功、跳转、提示等业务逻辑
  },
  error: (err) => {
    // 任意一个接口请求失败都会进入该回调
    console.error('请求异常', err);
  }
})

如果你的业务逻辑要求必须先调用登录接口校验账号密码通过，再调用发送OTP接口（而非完全同时发起请求），就不要用并行方案，改用switchMap做请求链式调用即可，避免嵌套订阅造成的回调地狱：

// 顶部额外引入需要的操作符
import { map, switchMap } from 'rxjs';

loginDone(ldata:any){
  return this.http.post(this.url2, ldata).pipe(
    // 登录接口请求成功后，再发起发OTP的请求
    switchMap(loginResult => {
      return this.http.post(this.url3, ldata).pipe(
        // 合并两个接口的返回结果
        map(sendOtpResult => ({loginResult, sendOtpResult}))
      )
    })
  )
}

注意：不要通过写两个嵌套subscribe的方式实现多请求调用，这种写法不利于后续维护、异常处理，也会造成内存泄漏风险。

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