[Vue] Axios

Axios

---

HTTP통신 : axios

• Vue에서 권고하는 HTTP통신라이브러리
• *Promise기반의 HTTP통신 라이브러리이며 다른 HTTP통신 들에 비해 문서화가 잘되어 있고 다양한 API 존재

 

*Promise

- 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직처리에 유용한 자바스크립트 라이브러리

- 데이터  요청 후 받아올때까지 기다렸다가 화면에 나타내는 로직을 실행할때 주로 사용

 

axios대표 API

API유형	처리결과
axios.get('URL').then().catch()	해당 URL 주소에 대해 HTTP GET요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then()안에 정의된 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 실행
axios.post('URL').then().catch()	해다애 URL 주소에 대해 HTTP POST요청을 보냄 then()과 catch()는 get방식과 동일
axios({옵션속성})	HTTP요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다.  데이터 요청을 보낼 URL, HTTP요청방식, 보내는 데이터의 유형 등

 

axios(config)

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// GET request for remote image in node.js
axios({
  method: 'get',
  url: '/board',
  responseType: 'json'
})
  .then(function (response) {
    //logic
  });

 

axios.get(url[, config])

axios({
	method:'get',
    url:  '/board/10'
});


axios('/board/10');  //디폴트값이 get이다.


axios.get('/board/10');

 

 

axios.post(url[, config])

axios({
	method:'post',
    url:  '/board'
    data:{userid:'happy', subject:'안녕하세요'}
});


axios.post('/board/',{
	userid:'happy',
    subject:'안녕하세요'
});

 

axios.put(url[, config])

axios({
	method:'put',
    url:  '/board/10'
    data:{userid:'happy', subject:'좋은하루보내세요'}
});


axios.put('/board/10',{
	userid:'happy', 
    subject:'좋은하루보내세요'
});

 

axios.delete(url[, config])

axios({
	method:'delete',
    url:  '/board/10'
});

axios('/board/10',{
	method:'delete'
});


axios.delete('/board/10');