[Vue.js] Axios 사용

Axios (액시오스)

Vue(뷰)에서 권고하며 가장 성공한 HTTP 클라이언트 라이브러리로 알려져있다.

---

Axios 사용법

1. GET 요청

기본구조

// 1.
axios.get('/url?id=elena90')
    .then( response => { console.log(response); } ) // SUCCESS
    .catch( error => { console.log(error); } ); // ERROR
 
// 2.
axios.get('/url', {
        params: { id: 'elena90' }
    })
    .then( response => { console.log(response) } );
    .catch( error => { console.log(error) } );
 
// catch 는 생략 될 수 있습니다.
 
 

예제

axios.get('/URL', { crossDomain : true })
    .then(function(response) {
        if (response.status == 200) {
            // SUCCESS
            
        }
    })
    .catch(function (error) {
        // FAIL
    });
 

2. POST, PUT 요청

기본구조

axios.post('/url', {
        user: 'elena90',
        message: 'axios example'
    })
    .then( response => { console.log(response) } )
    .catch( response => { console.log(response) } );
 

예제

// POST
axios.post('/posturl', JSON.stringify(jsonData),
    { headers: { 'Content-Type': 'application/json' } })
    .then(function(response) {
        if (response.status == 200) {
            console.log(response);
        }
    });
 
 
// PUT
axios.put('/puturl',
    { headers: { 'Content-Type': 'application/json' } })
    .then(function(response) {
        if (response.status == 200) {
            window.location.reload();
        }
    });
 

(delete나 더 예제 생기면 업데이트 할 예정)