如何使用来自 Nest.js 的 axios HttpService 发出 POST 请求

Question

我正在尝试使用 @nestjs/axios 和 return 响应发出 POST 请求。

这是我的代码：

verifyResponse(captcha_response: String): Observable<AxiosResponse<any>> {

    return this.httpService.post('<url of rest endpoint to verify captcha>', {
        captcha_response
    });
}

但是，Visual Studio 代码显示 Cannot find name 'AxiosResponse'。我可以从哪里导入这个？此类型在 Nest.js docs 中用作 Observable<AxiosResponse<Cat[]>>。我决定删除它并只使用类型 Observable<any>.

这行得通。 但是，如果我使用 console.log() 查看响应，我会得到：

Observable { _subscribe: [Function (anonymous)] }

我在 Whosebug 上找到的大多数答案都建议使用这种变体：

return this.httpService.post('<url of rest endpoint to verify captcha>', {
        captcha_response
    }).pipe(map(response => response.data));

...但是 console.log() 给了我这个：

Observable {
  source: Observable { _subscribe: [Function (anonymous)] },
  operator: [Function (anonymous)]
}

Whosebug 上的一些其他答案建议使用 .toPromise()，但显然这已被弃用。

总而言之，我是 Nest.js 的新手，我非常困惑。由于我找不到，如果能提供一个完整且最新的示例，说明如何发出简单的 POST 请求和 return 响应 JSON，我将不胜感激。

Answer 1

AxiosResponse 应从 axios:

导入

import { AxiosResponse } from 'axios'

您可以通过按 ctrl+space（或 mac 上的 options + esc）或使用 ctrl+.

Answer 2

如果你想让 HttpService 使用承诺而不是 RxJS Observable 你可以使用 lastValueFrom 环绕 this.httpService.post() 调用。这会将 Observable 转换为 Promise，您可以 await 正常使用它。否则，如果您只是 return observable，Nest 将为您处理等待响应。无论哪种方式，您都需要确保使用您拥有的 map((resp) => resp.data) 函数，这样您就不会在响应对象中得到循环数据（因为 Axios 的响应对象在设计上是循环的）。

如果您尝试 console.log() 数据，您将希望以

的形式使用 tap 和 map

this.httpService.post(url, data, options).pipe(
  tap((resp) => console.log(resp)),
  map((resp) => resp.data),
  tap((data) =>  console.log(data)),
);

tap 本质上是一种间谍方法，用于挖掘可观察对象、查看数据并让它通过。它可以改变数据，但通常最好将其留给 map 或其他 rxjs operators.

对于简单的 await 能力，像这样就足够了

const data = await lastValueFrom(
  this.httpService.post(url, data, options).pipe(
    map(resp => res.data)
  )
);

具有 AxiosRequestConfig 对象类型 (TypeScript) 的示例

const requestConfig: AxiosRequestConfig = {
  headers: {
    'Content-Type': 'YOUR_CONTENT_TYPE_HEADER',
  },
  params: {
    param1: 'YOUR_VALUE_HERE'
  },
};

const responseData = await lastValueFrom(
  this.httpService.post(requestUrl, null, requestConfig).pipe(
    map((response) => {
      return response.data;
    }),
  ),
);

如何使用来自 Nest.js 的 axios HttpService 发出 POST 请求

How to use axios HttpService from Nest.js to make a POST request

nestjs