Axios

Axios

브라우저와 node.js에서 사용할 수 있는 Promise 기반  HTTP 비동기 통신 라이브러리

---

Axios 특징

 

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

 

 

1. 설치하기 yarn add axios

 

2. 요청 보내기

import axios from "axios";

// axios는 axios.요청타입으로 요청을 보낼 수 있어요. 이 방식을 별칭 메서드라고 불러요.
// 예시)
// axios.get(url, config)
// axios.post(url, data, config)

// 어떤 요청을 보낼 지, 별칭 메서드 사용
axios.post('/cat', // 미리 약속한 주소
	{name: 'perl', status: 'cute'}, // 서버가 필요로 하는 데이터를 넘겨주고,
	{headers: { 'Authorization': '내 토큰 보내주기' },} // 누가 요청했는 지 알려줍니다. (config에서 해요!)
).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3. axios 객체를 생성했다면 이를 활용해서 기능별 api 객체도 만들어 관리.

export const authApi = {
    // e.g) 회원 가입
    signup: someData =>
        instance.post("api/user", {
					someData: someData,
					someOtherData: someOtherData
        }),

    // e.g) 유저 프로필 변경
    editUserProfile: (someData) =>
        instance.put(`api/user/${userId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),

 

axios 객체를 전역으로 만들면, 매번 헤더나 url 전체를 설정해주지 않아도 됩니다!

( 요청을 보내기 전에 같은 요청이 가진 않았나 확인한다거나 요청에 실패하면 잽싸게 가로채서 재요청을 보낼수도 있음 / 인터셉터)

 

요청 메소드 명령어

편의를 위해 지원하는 모든 요청 메소드의 명령어를 제공합니다.

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

※ 명령어 메소드를 사용시 'url', 'method', 'data' 속성을 config에서 지정할 필요가 없습니다.

---

참고: 

항해99 자료((React 전용) Axios & Ajax 활용 가이드 )

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

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