如何使用Nest.js的axios HttpService发送POST请求并获取响应

@nestjs/axios 提供的 HttpService 所有HTTP请求方法默认返回 RxJS 的 Observable 对象，该对象属于懒执行机制：未主动订阅前不会发起实际请求，也无法拿到响应结果，这就是你直接打印返回值只会输出 Observable { _subscribe: [Function (anonymous)] } 的原因。

下面提供两种常用的获取响应数据的实现方式：

方式1：通过Observable订阅获取数据（RxJS原生方式） #

直接在调用verifyResponse的位置通过subscribe方法订阅Observable，请求会在订阅时自动触发，成功/失败结果会传入对应的回调函数：

// 调用verifyResponse的代码位置
this.verifyResponse('用户提交的验证码响应值').subscribe({
  // 请求成功回调，response为完整的Axios响应对象
  next: (response) => {
    // response.data 就是后端接口返回的实际业务数据
    console.log('响应数据：', response.data);
    // 此处写你的业务处理逻辑
  },
  // 请求失败回调，覆盖网络异常、接口报错等所有异常场景
  error: (err) => {
    console.error('请求失败：', err.response?.data || err.message);
  }
})

方式2：转为Promise用async/await获取（更适合新手） #

如果不熟悉RxJS的用法，可以用RxJS提供的firstValueFrom方法将Observable转为标准Promise，用更常见的async/await语法处理：

1. 首先导入依赖方法：

import { firstValueFrom } from 'rxjs';

2. 调用请求的方法需要用async修饰，使用await等待响应：

// 调用verifyResponse的函数需要加async修饰
async handleCaptchaVerify() {
  try {
    const response = await firstValueFrom(this.verifyResponse('用户提交的验证码响应值'));
    console.log('响应数据：', response.data);
    // 此处写你的业务处理逻辑
  } catch (err) {
    console.error('请求失败：', err.response?.data || err.message);
  }
}

可选优化：提前提取业务数据 #

如果不需要用到Axios响应的其他元数据（状态码、响应头等），可以直接在请求方法内通过RxJS的map操作符提前提取业务数据，简化后续调用逻辑：

import { map } from 'rxjs';

verifyResponse(captcha_response: String): Observable<any> {
  return this.httpService.post('some url', {
      captcha_response
  }).pipe(
    // 直接将流内的Axios响应对象转换为后端返回的业务数据
    map(response => response.data)
  );
}

修改后订阅或者转Promise拿到的结果就不需要再取.data属性，直接是业务返回值。

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