지난 글에서는 fetch함수를 이용해 서버에 요청을 보내는 방식을 다뤄보았다.

근데!!!
매번 메서드 방식 지정하랴, 결과값 json으로 감싸랴, body 문자열화 시키느랴
좀 귀찮은게 있었다.

Axios

이걸 알아서 해주는 얘가 바로 Axios다.

Axios는 다운로드를 받던, CDN으로 script에 넣던 해도 된다.
https://axios-http.com/kr/docs/intro

Axios는 요청 메서드가 내장되었다.

참고로, fetch처럼 axios도 promise객체를 반환받는다.
따라서 then을 쓸 수 있다. (fetch때처럼 catch는 따로 안해도 된다)

GET ( DELETE )

let url = 'https://jsonplaceholder.typicode.com/users';
axios.get(url)
	.then(res=>console.log(res));

이전에 fetch에서는 일일이 메서드 방식을 지정했던 것과 달리, axios에서는 그냥 내장 메서드로 불러낼 수 있다.

POST,PATCH,PUT

 axios.post(url+'/11',{
            id:11,
            name:"배고파",
            username:"유저네임",
            email:"이메일",
        }).then(res=>console.log(res.data));
        //PATCH

구린 예시 죄송하다.
아무튼, URL에 유의하고, 두번째 파라미터로 객체를 넣어주면 된다.

Axios의 결과는 data 프로퍼티에 담겨진다.

위에 GET을 해본 결과,다음과 같이 나온다.
따로 JSON화를 시키지 않아도, 알아서 JSON처럼 잘 나온다.
우리가 필요한 결과값은, data프로퍼티에 넣어져서 나온다.

만약 저기 배열에 4번째로 존재하는 객체에 대한 정보를 얻고 싶다면, 다음과 같이 입력하면 된다.

axios.get(url)
	.then(res=>res.data)
	.then(userList=>user[3])
	.then(user=>console.log(user);

참고로 url은 마찬가지로, 서버 개발자가 지정한 방식대로 라우팅을 따라줘야 한다.
앞서 페이지에서는 get,post를 제외하고는 모두 url+/${id값} 으로 가이드를 해줬으므로,
4번째 사람을 지우고 싶다면 axios.delete(url+'/4')를 해주자.