[TIL] Axios 설치/기본

-  Axios란?

http를 이용해서 서버와 통신하기 위해 사용하는 패키지

 

-  Axios 설치

npm i axios
yarn add axios

 

 

(1) Axios GET

get은 서버의 데이터를 조회할 때 사용

axios.get('https://api.example.com/data', {
	timeout: 5000 // 5초 후에 요청이 타임아웃됨
})

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

 

[공식문서]

요청 Config | Axios Docs

 

오직 url만 필수이고, method를 지정하지 않으면 GET 방식이 기본값이다.

Axios는 GET 요청을 할 수 있도록 도와주는 패키지이고, GET 요청을 할 때는 API를 만든 사람이 하라는 대로 해야한다.

 

// 상대적인 URL을 인스턴스 메서드에 전달하려면 `baseURL`을 설정하는 것이 편리
  baseURL: 'https://example.com/api',

 

 

 

 

function App () {
const [users, setUsers] = useState(null);

const fetchData = async () => {
	const { data } = await axios.get("http://localhost:4000/users")
    // 서버로부터 fetching한 데이터를 useState의 state로 set 
    setTodos(data);  }
}

 

 

 

 

(2) Axios POST

 

// 요청에 사용될 데이터
{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
}

const onSubmitHandler = async (post) => {
	axios.post('https://jsonplaceholder.typicode.com/posts', posts);
    
    setPosts([...posts, post])
}

 

 

post 는 보통 서버에 데이터를 추가할 때 사용.

보통은 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용

 

 

 

(3) Axios delete

 

// 새롭게 추가한 삭제 버튼 이벤트 핸들러 
  const onClickDeleteButtonHandler = (postId) => {
    axios.delete(`http://localhost:4000/posts/${postId}`);
  };
  
  // ... 생략 ...
  
  	{posts?.map((post) => (
          <div key={post.id}>
            {post.title}
		<button type="button"
			onClick={() => onClickDeleteButtonHandler(post.id)}
			>
        		삭제하기
        		</button>
             	</div>
        	))}

 

 

 

-  PATCH

 

(1) Axios patch

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

 

  const onClickEditButtonHandler = (postId, edit) => {
    axios.patch(`http://localhost:4000/posts/${postId}`, edit);
  };
  
  // ...
  
  <button
	// type='button' 을 추가해야 form의 영향에서 벗어남
	type="button"
	onClick={() => onClickEditButtonHandler(targetId, editTodo)}
	>
    	수정하기
	</button>