[javascript] Axios를 이용한 송금 처리 방법

이 기술 블로그에서는 JavaScript 라이브러리인 Axios를 사용하여 송금 처리를 하는 방법에 대해 알아보겠습니다. Axios는 웹 요청을 실행하기 위한 간편하고 유명한 라이브러리입니다.

Axios를 설치하기

먼저, Axios를 사용하기 위해 npm을 이용하여 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 패키지를 설치합니다.

npm install axios

송금 처리 요청 보내기

Axios를 설치한 후, 다음과 같이 송금 처리 요청을 보낼 수 있습니다.

const axios = require('axios');

const transferData = {
  senderAccount: '1234567890',
  receiverAccount: '0987654321',
  amount: 100,
};

axios.post('/api/transfer', transferData)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

위의 코드에서는 transferData라는 객체를 생성하여 송금 처리에 필요한 정보를 담고 있습니다. axios.post 메소드를 사용하여 /api/transfer 엔드포인트에 POST 요청을 보내고, 응답이 오면 then 블록이 실행됩니다. 성공적인 응답의 데이터는 response.data 안에 포함되어 있습니다. 만약 에러가 발생하면 catch 블록이 실행됩니다.

요청에 헤더 추가하기

API 요청에 헤더를 추가하려면 axios.post 메소드 호출 시 두 번째 인자로 설정 객체를 전달하면 됩니다. 다음은 Authorization 헤더에 JWT 토큰을 추가하는 예시입니다.

const transferData = {
  senderAccount: '1234567890',
  receiverAccount: '0987654321',
  amount: 100,
};

const headers = {
  Authorization: 'Bearer <jwt-token>',
};

axios.post('/api/transfer', transferData, { headers })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

이렇게 추가할 헤더는 headers 객체에 설정하고, axios.post 메소드 호출 시 설정 객체의 headers 속성으로 전달하면 됩니다.

결론

위에서는 Axios를 사용하여 송금 처리를 하는 방법에 대해 소개했습니다. Axios는 간편하고 확장 가능한 HTTP 클라이언트 라이브러리로, 다양한 기능을 제공합니다. 송금 처리 외에도 Axios를 사용하여 다양한 API 요청을 보낼 수 있으니, 참고하시기 바랍니다.


참고 자료