[ NODE.JS ] axios

Axios 튜토리얼

크롬 콘솔을 열어서 다음을 차례대로 실행해 보세요. 또 Network 탭에서 실제로 어떤 요청이 일어났는지 확인하세요.

prettyPrint는 결과를 예쁘게 출력할 수 있도록 제가 미리 짜놓은 함수입니다.

GET /api/todos

// GET
axios.get('/api/todos')
  .then(res => {
    prettyPrint(res.data)
  })

POST /api/todos

// POST
axios.post('/api/todos', {title: "ajax 공부"})
  .then(res => {
    prettyPrint(res.data)
  })

PATCH /api/todos/3

// PATCH
axios.patch('/api/todos/3', {title: "axios 공부"})
  .then(res => {
    prettyPrint(res.data)
  })

DELETE /api/todos/3

// DELETE
axios.delete('/api/todos/3')
  .then(res => {
    prettyPrint(res.data)
  })

---

GET /api/todos/?title=react

axios 요청 메소드의 두 번째 인자로 config 객체를 넘길 수 있습니다. config 객체를 통해 요청의 쿼리 스트링, 요청 헤더, 쿠키 포함 여부 등 많은 것들을 설정할 수 있습니다.

// config 객체
axios.get('/api/todos', {
  params: { // query string
    title: 'react 공부'
  },
  headers: { // 요청 헤더
    'X-Api-Key': 'my-api-key'
  },
  timeout: 1000 // 1초 이내에 응답이 오지 않으면 에러로 간주
}).then(res => {
    prettyPrint(res.data)
  })

---

응답 객체

응답 객체를 통해 응답의 여러 정보에 접근할 수 있습니다.

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