Vue 서버 데이터 통신 - Axios

 

Axios

Axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리이다. Promise* 형태로 값을 return 한다. Fetch와 달리 구형 브라우저도 지원하고, 응답 시간 설정을 통해 네트워크 에러 발생 시 정해진 응답 시간을 초과하면 해당 요청을 종료시킬 수도 있다.

 

• Promise ?
  • 프로미스는 자바스크립트 비동기 처리에 사용되는 객체다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
  • 프로미스의 3가지 상태
    • Pending(대기) - 비동기 처리 로직이 완료되지 않음
      • new Promise();
      • new Promise(function(resolve, reject){ });
    • Fulfilled(이행) - 비동기 처리가 완료되어 프로미스가 결과 값을 반환
      • 콜백 함수 인자인 resolve 를 실행하면 Fulfilled
      • new Promise(function(resolve, reject){ resolve(); });
      • 이행(완료) 상태가 되면, .then()으로 데이터를 받을 수 있다.
    • Rejected(실패) - 비동기 처리가 실패하거나 오류가 발생
      • 실패가 되면 실패 이유를 .then().catch()로 받을 수 있다.

// Pending(대기)
new Promise();
//or
new Promise(function(resolve, reject) {

});

// Fulfilled(이행)
new Promise(function(resolve, reject) {
	resolve();
});
// 이행 상태에서 데이터 꺼내쓰기
function getData() {
	return new Promise(function(resolve, reject) {
    	var data = 100;
        resolve(data);
    });
}
getData().then(function(resolvedData) {
	console.log(resolvedData); //100
});

// Rejected(실패)
function getData() {
	return new Promise(function(resolve, reject) {
    	reject(new Error("Request is failed"));
    });
}
getData().then().catch(function(err) {
	console.log(err); // Error: Request is failed
});

 

 

Axios 설치

npm install axios --save

 

 

Axios에서 제공하는 request methods

• axios.request(config)
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.delete(url[, config])
• axios.head(url[, config]_
• axios.options(url[, config])
• axios.patch(url[, data[, config]])

 

 

 

mixins.js 생성

데이터 조회/수정/삭제/생성은 프로젝트 전반에 사용하는 기능으로 mixins에 등록하여 공통으로 사용하는 것이 좋다. 사용하려면 main.js 에 추가해줘야 한다.

예) 

import axios from 'axios';

export default {
	methods: {
    	async $api(url, method, data) {
        	return (await axios({
            	method: method,
                url,
                data
            }).catch(e => {
            	console.log(e);
            })).data;
        }
    }
}