[Vue] axios를 이용하여 서버 통신하기

 

 

 

 Front 작업에서 서버와 통신하기 위한 방법으로 Promise API를 활용하는 비동기 통신 라이브러리인 axious 가 권장되고있다. 그밖에  fetch, superagent 그리고 Vue.js 플러그인으로 개발된 vue-resource라는것이 존재한다. 

 

▶ axios 메서드

axios.get(url[, config])

axios.delete(url[, config])

axios.psot(url[, data[, config])

axios.put(url[, data[, config])

axios.head(url[, config])

axios.options(url[, config])

 

 

▶ axios 설치

npm install --save axios

 

 

▶ http proxy 설정

 

프로젝트 최상위 디렉토리에 vue.config.js파일을 생성하고 아래의 코드를 작성한다.

개발 서버에 /api/orders 를 요청하게되면 http://localshot:3000/orders로 요청이 전달 된다.

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localshot:3000',
                changeOrigin: true,
                pathRewrite: {
                '^/api': ''
                }
            }
        }
    }
}

 

 

axios 요청 방법

 

▶  저수준 axios 메서드 

 저수준 axios 메서드의 특징은 모든 전달값을 config 객체로 전달한다는 특징이 있다. Promise 객체는 요청이 성공적이라면 then이 호출되며 요청이 실패하면 catch가 호출된다.

fetchOrders : function() {
    axios({
        method: 'GET',
        url : '/api/orders',
        params : {
            orderNo : 1,
            users : 5
        }
	}).then((response) => {
            console.log(response);
            this.result = response.data;
        }).catch((ex)=> {
        	console.log("Error : ", ex)
    })
}

 

 

▶ GET

getOrder : function() {
    axios.get('/api/orders/' + this.orderNo)
    .then((response) => {
        console.warn(response);
        this.result = response.data
    })
}

 

 

▶ POST

addOrder : function() {
    axios.post('/api/orders',
    	{ orderNo:this.orderNo, user:this.user, address:this.address }
    ).then(response => {
        console.warn(response)
        this.result = response.data
        this.no = response.data.no
    }).catch((ex) => {
    	console.warn("Error : ",ex)
    })
}

 

 

▶ PUT

updateOrder : function() {
    axios.put('/api/orders/' + this.no,
    	{ orderNo:this.orderNo, user:this.user, address:this.address }
    ).then(response => {
        console.warn(response)
        this.orderNo = '';
        this.user = '';
        this.address = '';
        this.result = response.data
    }).catch((ex) => {
    	console.warn("Error : ",ex)
    })
}

 

 

▶ DELETE

deleteOrder : function() {
    axios.delete('/api/orders/' + this.no)
    .then(response => {
    	console.warn(response)
    	this.result = response.data
    }).catch((ex) => {
    	console.warn("Error : ",ex)
    })
}

 

 

※ axios 사용 시 주의 사항

 axios를 사용하면서 then() 처리를 할 때는 화살표 함수를 사용할 것을 권장한다. then() 내부에서 화살표 함수를 사용하지 않으면 this가 vue 인스턴스를 참조하지 않기 때문에 밖에서 별도의 변수에 this를 할당한 후에 클로저 방식으로 접근해야 하는 불편함이 발생한다.