Vuejs post와 get 차이 - axios 서버 통신

내가 사용하는 axios의 경우,

promise 기반의 javascript 비동기 처리 방식을 사용한다

=> 요청 후 .then()으로 결과값을 받아야 처리해야 한다

 

 

 

 

예를 들면,

axios.get('/api/example').then(res => { 
		console.log(res.data) 
        })

// api/example에서 데이터 불러오고
// .then()의 res에 불러온 데이터를 담아 처리

 

 

 

 

 

 

 

 

axios는 여러 방법으로 서버와 통신할 수 있다

 

 

get 
get: 서버로부터 데이터를 가져올 때 사용

 

axios.get('/api/example').then(res => { 
		console.log(res.data) 
        })

// api/example에서 데이터 불러오고
// .then()의 res에 불러온 데이터를 담아 처리

 

이렇게 리스트를 불러오거나

아래처럼 세부 정보를 불러올 수 있다

axios.get('/api/example/one').then(res => { 
	console.log(`status code: ${res.status}`); 
        console.log(`headers: ${res.headers}`) 
        console.log(`data: ${res.data}`
        })

 

axios 요청 시 파라메터 정보가 아니라 메소드의 두 번째 인자인 config 객체로 요청값을 넘길 수도 있다고 한다.

 

 

 

 

 

---

 

 

 

post
post: 서버에 데이터를 추가할 때 사용

axios.post('/api/example', {title: "서버에 데이터 추가하기."}) .then(res => { 
	console.log(res.data) 
    })

 

 

 

 

 

 

---

 

 

patch
patch: 특정값 수정할 때 사용

axios.patch('/api/example/one', {title: "patch로 특정값 수정하기."}) .then(res => { 
	console.log(res.data) 
    })

 이렇게 하면

서버의 example 리스트 중 one의 title를 수정할 수 있다

 

 

put
put: 수정할 때 사용

axios.put('/api/example/one', 
{ "user_nm":"jiwoolee", "birthday":"991103"}) .then(res => { 
	console.log(res.data) 
    })

 

 

 

 

 

 

---

 

 

 

 

delete
delete: 특정값 삭제할 때 사용

axios.delete('/api/example/one') .then(res => {	
	console.log(res.data) 
})

이렇게 하면

서버의 example 중 one에 해당하는 값을 삭제할 수 있다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정리하면

 

• 불러오기 : axios.get(url[, config])
• 입력하기 : axios.post(url[, data[, config]])
• 수정하기 : axios.put(url[, data[, config]])
• 삭제하기 : axios.delete(url[, config])

**

[ ]는 생략가능