[ES6 ]Axios 모듈화

리액트 관련 문서로 정의하려했는데, 생각해보니 리액트 문법이 단하나도 들어가지않아 ES6를 말머리에 달았다.

 

import axios from 'axios'


const instance = axios.create({
	baseURL: process.env.PUBLIC_URL,
	timeout: 1000
})

해당 방식으로 파일을 새로 만들어준다. 나는 CommonAxios.jsx 로 작성하였다.

 

공통적으로 요청전이나 요청 에러 처리를 해야 할게 있다면

instance.interceptors.request.use(
	function (config) {
		// 요청 바로 직전
		// axios 설정값에 대해 작성합니다.
		return config
	},
	function (error) {
		// 요청 에러 처리를 작성합니다.
		return Promise.reject(error)
	}
)

코드를 추가해준다.

 

응답전이나 응답 에러 처리는 

instance.interceptors.response.use(
	function (response) {
		return response
	},

	function (error) {
		return Promise.reject(error)
	}
)

위 코드를 추가해주면 된다.

 

import CommonAxios from 'axios/CommonAxios'

export default {
	getLiveDeviceList () {
		return CommonAxios({
			url: '/json/LiveDeviceData.json',
			method: 'GET'
		})
	},

	getLastDeviceList () {
		return CommonAxios({
			url: '/json/LastDeviceData.json',
			method: 'GET'
		})
	},

}

이후 Axios에 대한 메서드를 정의해준 후

 

DeviceData.getLiveDeviceList()
.then ((res)=> {
console.log('res',res)
})
.error ((error) => {
console.log('error', error)
})

 위와 같이 컴포넌트에서 사용해주면 된다.