Axios는 자바스크립트에서 많이 사용되는 HTTP 클라이언트 라이브러리입니다. API를 호출할 때 URL이 동적으로 변하는 경우에 대비하여 Axios를 사용하여 API URL을 동적으로 설정하는 방법을 알아보겠습니다.

API URL 동적 설정 예시

axios.get() 메서드를 사용하여 GET 요청을 보내는 예시를 살펴보겠습니다. 이때 API URL에 동적 값을 전달하고자 할 경우, URL 문자열에 플레이스홀더를 넣어주고 params 객체를 사용하여 동적 값들을 전달합니다.

const axios = require('axios');

const apiUrl = 'https://api.example.com/posts/{postId}';
const postId = 123;

axios.get(apiUrl, {
  params: {
    postId: postId
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위 예시에서는 apiUrl 변수에 API의 기본 URL을 저장하고 있고, postId 변수에 동적으로 변경될 값을 저장하고 있습니다. 이 때 apiUrl의 문자열 내에 {postId}를 플레이스홀더로 사용하여 동적으로 변하는 값을 설정합니다.

axios.get() 메서드의 두 번째 인자로 전달하는 객체에서 params 속성에 동적 값들을 전달합니다. 이 예시에서는 postId 값을 전달하고 있습니다.

이렇게 Axios를 사용하여 API URL을 동적으로 설정하고 값을 전달하면, API 호출 시 필요한 값을 유동적으로 처리할 수 있습니다.

결론

Axios를 사용하여 API URL을 동적으로 설정하는 방법에 대해 알아보았습니다. 이를 통해 API 호출에 필요한 매개변수, 쿼리 등을 유동적으로 전달하고 처리할 수 있습니다. Axios를 활용하여 다양한 동적 요청을 구현해보세요.

참고 자료

• Axios 공식 문서
• MDN Web Docs - URL