Axios 사용법

후론트엔드 글은 잘 안쓰는데.... 쓰려고한닷[ 나는 ES6를 좋아한다 ] 

일단 클라이언트단에서 HTTP통신을 하기 위한 방법에는

 

Ajax, Fetch, Axios 3대장이 있다

위에 나온것처럼 Axios가 지원 브라우저도 제일 많고, XSRF(CSRF) 보안도 갖추고 있으며, response가 JSON type이며, Promise기반이기때문에 Call back hell을 막을 수 있다.

CDN 방식

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

npm install 방식

npm install axios

파일 직접 다운로드

<script src="static/js/axios/axios.min.js"></script>

* ajax의 문제점

// Ajax

• 깊어진 callback 형태 ⇒ 알아보기 어려움

// Axios

• 알아보기 쉬워진 가독성

* interceptor로  요청, 응답  custom하기

const validate = (stat) => {
  return stat >= 200 && stat < 300; // default
}

axios.interceptors.request.use(
  function (config) {
    config.baseURL = 'http://abc.def.co.kr:8080';
    config.timeout = 60000;

    const token = sessionStorage.getItem('token');
    if(token !== null || token !== "" || token !== "undefined") {
      config.headers.common['Authorization'] = token;
    }
    config.headers.common['Cache-Control'] = 'no-cache';
    config.headers.common['Pragma'] = 'no-cache';
    config.headers.common['Expires'] = '0';

    config.headers.common['Content-Type'] = 'application/json';
    config.headers.common['Access-Control-Allow-Origin'] = '*';
    config.headers.common['Access-Control-Allow-Methods'] = 'GET, PUT, POST, DELETE, PATCH, OPTIONS';
    config.withCredentials = false;
    config.responseEncoding = 'utf-8';

    config.validateStatus = validate;

    return config;
  },
  function (error) {
    console.log(error.response);
    return Promise.reject(error);
  });

axios.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    console.log(error.response);
    return Promise.reject(error);
  });

 

요청과 응답을 가로챈다.

• baseURL에 이미 host주소:port번호가 존재
• timeout = 60000(ms) ⇒ 60초 동안 요청을 보내고 반응이 없으면 요청을 계속 보내지 않음
• sessionStroage에서 token 값을 보고 있으면 header [Authorization]에 설정해줌
• 기본적으로 rest-api이므로 application/json 타입
• 캐시 off
  • 개발환경에서는 get 요청 캐시를 안해야 브라우저에서 개발자도구 열고 새로고침 안해도된다
  • 물론 서비스할때는 여기부분을 지워주고 배포하자
  • Cache-Control, Pragma, Expires
• CORS 설정
  • Access-Control-Allow-Origin, Access-Control-Allow-Methods, withCredentials
• 반환값은 utf-8로 인코딩(한글지원)
• validateStatus: 200번대의 response만 성공처리

Axios Usage

const apiPaths = {
  loginApi: '/v1/auth',
  mailApi: '/v1/mail',
  testApi: '/v1/test'
};

--

Basic

axios
	.get(`경로`)
	.then(res => { // 성공
		console.log(res);
	})
	.catch(err => { // 실패
		console.error(err);
	});

• 성공시 then으로 값 추출 가능
• 실패시 catch로 에러 처리 가능
• responseType: json형태의 Object
• 우리가 봐야될 값들
  • res.status
  • res.data ⇒ 실제 넘어오는 body 값

// 서버

// 클라이언트 호출

Get

기본적으로 변수는 backtick(₩₩)에 담아서 ${변수}로 처리해주세요~

- PathVariable

/에 변수를 붙여서 사용

const intArr = [1, 2, 3];

getSingleData(intArr);

function getSingleData(data) {
      axios
        .get(`${test_api}/v1/single/${data}`)
        .then(res => {
            console.log(res.data);
        })
        .catch(err => {
          console.error(err);
        });
    }

- QueryParams( == QueryString )

{ params : 데이터 }

실질적으로 /v1/queryParams?name=boki&age=20으로 처리

function getQueryParams() {
      const payload = { name: 'boki', age: 20 };
      axios
        .get(`${test_api}/v1/queryParams`, { params: payload })
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.error(err);
        });
    }

 

Post

- Body(DTO)

post옆에 , 로 객체를 넣어주면 body로 들어감

function postBody() {
      const payload = { name: 'boki', age: 20 };
      axios
        .post(`${test_api}/v1/postBody`, payload)
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.error(err);
        });
    }

- (FormData)

form을 만들고 헤더에 multipart/form-data타입으로 전송한다고 알림

function postFile() {
      const formData = new FormData();
      const fileInput = document.getElementById("fileUpload");
      formData.append("file", fileInput.files[0]);
      axios
        .post(`${test_api}/v1/postFile`, formData, {
        	headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(res => {
            console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    }

 

Put, Path, Delete

위와 비슷한 방식으로 해결하면 됨

 

Axios Usage + More

• 여러개의 요청을 묶어서 호출도 가능
• 주의할점: 에러처리를 각각 할 수 없기때문에 주의 요함
• 순서가 상관없고, 요청 데이터가 비슷한 경우에만 사용

axios
      .all([axios.get(`${test_api}`), axios.get(`${test_api}/v1/single/choi`), axios.get(`${test_api}/v1/single/lee`), axios.get(`${test_api}/v1/single/park`)])
      .then(
        axios.spread((res1, res2, res3, res4) => {
          // ES6 방식
          const [result1, result2, result3, result4] = [res1.data, res2.data, res3.data, res4.data];
          console.log(`re1: ${result1}, re2: ${result2}, re3: ${result3}, re4: ${result4}`);
        }));

 

• 순서가 중요한 api 호출인경우(비동기 호출을 동기적으로)
• 호출에는 async axios, 받아오는 변수에는 await
• 기다린다는 의미로 해석
• async - await을 붙여서 처리
• example) User데이터가 앞선에 필요 ⇒ 다음 호출에 유저 데이터를 사용

const user = {
  userId: 'boki', userPasswd: 'pw1234!'
};

document.addEventListener('DOMContentLoaded', async () => {
	// 로그인을 먼저 하고 기다림
  await axios
    .post(`${apiPaths.loginApi}/local`, user)
    .then(res => {
      sessionStorage.setItem('token', res.data.token);
    })
    .catch(err => {
      console.error(err);
    });

	// 유저 번호를 받아옴
  let userNo = await axios
    .get(`${apiPaths.loginApi}/me`)
    .then(res => {
      console.log(res.data);
      return res.data.userNo;
    })
    .catch(err => {
      console.error(err);
    });

  console.log(userNo);

	// userNo를 사용
  axios
    .get(`${test_api}/v1/single/${userNo}`)
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.error(err);
    });
});

• 추가로 다른 baseURL api를 호출하는 경우(MSA etc..)

const otherAxios = axios.create({
	baseURL: 'https://prod.testapi.com'
});

otherAxios.get(....)

• axios로 그림을 보여주고싶은 경우

axios.get({
	responseType: 'blob'
});