NestJS Axios사용하기 (POST)

안녕하세요. 알렉스 입니다. 이번에는 NestJS을 이용하여 restAPI요청(POST)을 해보도록 하겠습니다. 

이전글 : NestJS Axios사용하기 (GET)

그런데 NestJS을 이용하여 GET요청을 하기전 Swegger와 Global Validation Pipe를 이용할 것입니다. 관련 자료는 아래 링크를 참고해 주시기 바랍니다.


링크 : NestJS http로 들어오는 파라메타, 쿼리, Body값들에 대해서 Global Validation Pipe 만들기

링크 : NestJS에 Swagger(스웨거) Document(문서)를 적용



이제 Axios을 이용하여 POST요청을 하겠습니다. 이거에 대한 공식 문서는 아래 링크를 참고하셔도 되고 아니면 이 블로그를 따라하시고 진행하셔도 됩니다.


링크 : HTTP Module


일단 NestJS에서 axios을 사용하기 위해서는 관련 npm을 설치해야 합니다.

npm i --save @nestjs/axios


사진1) 폴더 구조

이제 설치후 사진1과 같이 파일을 구성해 줍니다. 실제 POST요청을 할 폴더는 'rest-api'

입니다. 생성을 완료하시면 아래코드와 같이 작성을 하시면 됩니다.

// 경로 : src/app.module.ts
import { HttpModule } from '@nestjs/axios';
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { RestApiModule } from './rest-api/rest-api.module'; // 미리 코딩이 되어 있습니다.

@Module({
imports: [HttpModule, RestApiModule],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}


app.module.ts에서 HttpModule, RestApiModule을 import해줍니다. HttpModule은 Get요청을 보내기 위한 모듈이고 RestApiModule은 실제 Get요청 수행할 API를 만드는 것입니다.


// 경로 : src/rest-api.module.ts
import { HttpModule } from '@nestjs/axios';
import { Module } from '@nestjs/common';
import { RestApiController } from './rest-api.controller';
import { RestApiService } from './rest-api.service';

@Module({
imports: [HttpModule],
controllers: [RestApiController],
providers: [RestApiService],
})
export class RestApiModule {}


위의 코드에서도 'HttpModule'를 추가해 줍니다.


// 경로 : src/rest-api.service.ts
import { HttpService } from '@nestjs/axios';
import { Injectable } from '@nestjs/common';
import { AxiosResponse } from 'axios';
import { map, Observable } from 'rxjs';
import { GetRestApiDto } from './dto/get-rest-api.dto';

@Injectable()
export class RestApiService {
constructor(private httpService: HttpService) {}

postRequest(dto: GetRestApiDto): Observable<AxiosResponse<Body>> {
// dto는 비어있기 때문에 Swagger에서 Object를 임의로 넣으면 됩니다.
console.log('Start Post request');
return this.httpService
.post('http://localhost:4000', {
...dto,
})
.pipe(
map((res) => {
console.log('response : ', res);
console.log('response(data) : ', res.data);
return res.data;
}),
);
}
}


위의 코드에서는 임시로 만든 서버(http://localhost:4000)로 POST요청을 보냈습니다. 그리고 그에 따른 응답을 res.data로 받도록 하였습니다.


// 경로 : src/rest-api.controller.ts
import { Body, Controller, Post } from '@nestjs/common';
import { ApiTags } from '@nestjs/swagger';
import { GetRestApiDto } from './dto/get-rest-api.dto';
import { RestApiService } from './rest-api.service';
@ApiTags('Axios')
@Controller('rest-api')
export class RestApiController {
constructor(private readonly restApiService: RestApiService) {}

@Post()
create(@Body() createRestApiDto: GetRestApiDto) {
return this.restApiService.postRequest(createRestApiDto);
}
}


이제 컨트롤을 만들고 'npm run start'을 터미널로 실행한 후 'http://localhost300/api-docs' url로 접속히면 Swagger문서를 볼수 있습니다.


사진2) Swagger화면


사진3) Swagger에서 Post요청


사진2,3과 같이 화면이 출력되면 이제 Post요청을 보낼수 있게 되는 것입니다. 사진2에서 'Try it out'을 누르고 생성된 버튼 'Exceute'버튼을 누르면 해당 서버로 Post요청을 보내게 됩니다.


사진4) Swagger로 Post요청 결과1

사진4에서 Body에 임의의 Object { "number" : 12345 }를 넣었고  Post요청을 하였습니다.

사진5) Swagger로 Post요청 결과2

사진 4,5와 같이 Post요청의 응답결과는 'You send me a Post request!' 와 Body값 입니다. 이는 제가 임시적으로 만든 서버이므로 다른서버에 Post요청을 할시 다른 결과가 나올수 있습니다.


 위 예제 GitHub 링크 및 Branch : postRequest





댓글

이 블로그의 인기 게시물

Lesson 12_1 프로퍼티 노드(Property Node)

DAQ로 전압 측정하기-2

Lesson 12_2 참조를 이용한 프로퍼티노드(Property Node)