[Vue] axios

axios

웹 또는 앱을 개발하다보면 서버가 필요하게 된다. 이때에 axios는 JavaScript와 Vue에서 유용하게 사용된다

axios는 Promise 기반의 자바스크립트 비동기 처리 방식을 사용한다. 그래서 요청후 .then() 으로 결과값을 받아서 처리한다.

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

/api/data에서 데이터를 불러오고, 불러온 데이터는 .then() 의 res에 담아서 처리하는 방식이다.

1. vue.js 프로젝트에 axios 설치하는법

nodejs가 설치 되었다는 가정하에 npm,yarn를 이용하여 axios를 설치하면 된다.

1. npm

    npm install --save axios
   

2. yarn

    yarn add axios
   

3. 직접 스크립트 삽입

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   

2. axios 별칭으로 사용하기

axios는 REST 별칭을 이용하여 쉽게 통신이 가능하다

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

3.Get (불러오기)

GET은 서버로 부터 데이터를 가져오는데 사용, 서버주소인 /api/data fh 로 부터 값을 불러올때 사용

axios.get('/api/data')
    .then(res => {
        //불러온 값을 console에 뿌려줌
        console.log(res.data)
    })

axios 요청 시 파라메터 정보 (/api/todos/1)같이 입력하여 정보를 얻어올수 있음 , 위에것이 리스트를 불러온다면 지금 아래의 요청은 하나의 상세정보를 불러옴

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

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

axios.get('/api/data', {
   params: { title: 'vue.js' },
   headers: { 'X-Api-Key': 'my-api-key' }, 
   timeout: 1000 // 1초 이내에 응답이 없으면 에러 처리 
   }).then(res => { 
       console.log(res.data) 
       })

4.POST (값 입력하기)

/api/data에 값을 입력 할때 사용 서버의 데이터 리스트의 마지막에 지금 넘기는 정보를 추가

axios.post('/api/data', {title: "vue.js"})
    .then(res => {
        console.log(res.data)
    })

5.PATCH(특정 값 수정)

/api/data/3 에 값을 입력 할때 사용 서버의 데이터 리스트 중 3 에 해당하는 값의 title을 수정

axios.patch('/api/data/3',{title : "vue.js"})
    .then(res => {
        console.log(res.data)
    })

6. DELETE (특정 값 삭제)

/api/data/3에 값을 삭제할때 사용 서버의 데이터 리스트 중 3에 해당 하는 값을 삭제 합니다.

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

출처 : https://ux.stories.pe.kr/138 [UX 공작소]