가볍게 살펴보는 Axios

Axios?

 

Axios는 웹 통신 기능을 제공하는  HTTP 비동기 통신 라이브러리이다.

 

 

Axios의 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

 

요청방식

• GET - read
• POST - create
• PATCH,PUT - update
• DELETE - delete

 

GET

 

// node.js에서 GET 요청으로 원격 이미지 가져오기
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
  
  
  //편의를 위해 지원하는 메소드의 명령어
const fetchTodos = async () => {
    const { data } = await axios.get("http://bit.ly/2mTM3nY"); // axios.get(url[, config])
  };

 

값을 가져올 때 사용하는 메서드.

url과 config를 받음.

config에는 설정할 수 있는 요소들이 굉장히 많다

 

Axios를 사용할 때에는 어떤 상황에서 path variable을 사용할지 query를 사용할지는 API 명세서를 보고 판단해야 한다.

 

path variable   =  /posts/1

query =  /posts?title=json-server&author=typicode

 

 

POST

 

// POST 요청 전송
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//편의를 위해 지원하는 메소드의 명령어
 const onSubmitHandler = (data) => {
    axios.post("/user/12345", data); //axios.post(url[, data[, config]])
  };

 

새로운 리소스를 생성할 때 사용하는 메서드.

post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

 

여러 개의 요청을 동시 수행할 경우, axios.all() 메서드를 사용

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

 

 

PATCH,PUT

 

어떤 데이터를 수정하고자 서버에 요청을 보낼때 사용하는 메서드. 

 

PUT은 리소스의 모든 데이터를 수정한다.

PATCH는 요청하는 부분만 업데이트를 진행한다.

 

API명세서를 작성할때 PUT이나 PATCH 같은 용어들은 수정을하거나 삭제를 할때, 용어들을 다르게 자유자재로 써도 상관없지만 HTTP에서 정해진 규칙을 만들어 개발자들 상호간에 약속을 해놓고 사용하는 편이다.

 

 

 

 

 

참고사이트

[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리

사용법 | Axios 러닝 가이드