axios 시작하기

---

axios 시작하기 : axios API site

axios는 무엇인가?

Promise based HTTP client for the browser and node.js

1. 브라우저와 node.js를 위한 Pomise 기반 HTTP client 라이브러리라고 할 수 있다.
2. 보통 AJAX and fetch와 비교하는데, JS의 HTTP client 라이브러리 중에서는 axios가 가장 호환성이 뛰어나고 짧은 코드를 가지고 있다.

서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

1. 따라서 브라우저와 node.js의 확장성이 높다고 할 수 있다.

HTTP method 예제 보기

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

1. 딱 봐도 간단해 보인다.
2. POST 메서드의 보내는 데이터 형식은 JSON과 흡사하다.
3. 때문에 axios는 JSON 데이터를 자동 변환이 가능하다.
4. then, catch 함수를 통해 요청과 응답에따라 지정된 로직을 처리할 수 있다.

axios.post('URL', data {
    config option...
  })

Interceptor 사용하기

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

1. then, catch 함수를 처리하기 전에 로직을 처리하는 Interceptor 로직을 수행할 수 있다.
2. 요청과 응답 Config 필드 가이드는 여기에서 볼 수 있다.
3. 요청 Config : request Config
4. 응답 스키마 : response schema

실무 예제

await axios.post(`${process.env.REACT_APP_API_URL}/f/s`, data, {
        headers: {
          "Content-Type": "application/json",
          authorization: authToken,
        },
      });

1. env를 통한 환경변수를 가져와서 서버 사이드 통신을 했다.
2. auth 사용에 대해서 :

 // `auth`는 HTTP Basic 인증이 사용되며, 자격 증명을 제공합니다.
  // `auth`를 사용하면, `Authorization` 헤더가 설정되어 `headers`를 사용하여 설정한 기존의 `Authorization` 사용자 지정 헤더를 덮어씁니다.
  // 이 파라미터를 통해 HTTP Basic 인증만 구성할 수 있음을 참고하세요.
  // Bearer 토큰 등의 경우 `Authorization` 사용자 지정 헤더를 대신 사용합니다.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },