WIL 5 ( Weeked I Learned ) - 22/06/12

Axios.. 네트워크와 통신하기 위한 비동기 API 이다.

기본적으로 사용하기 위해서는 패키지를 설치해야 한다.

npm install axios

yarn install axios

REST API

REST API는 우리가 하고싶은 작업에 따라 다른 메서드로 요청할 수 있는 것은 다들 알고 있을 것이다.

REST API에는 대표적으로 다음과 같은 HTTP 메서드를 행위의 수단으로 이용한다.

• GET : 데이터 조회
• POST : 데이터 등록 및 전송
• PUT : 데이터 수정
• DELETE : 데이터 삭제

이제 이 4가지 메서드를 axios에서 사용할 수 있다.

axios의 Request method에는 다음과 같은 것들이 있다.

• GET : axios.get(url[, config])
• POST : axios.post(url, data[, config])
• PUT : axios.put(url, data[, config])
• DELETE : axios.delete(url[, config])

axios에서 Request Method를 사용하기 위해서는 axios에 .을 붙히며 소문자로 Req Method를 넣어주면 된다.

그리고 해당 메서드의 파라미터에는 API의 주소를 넣는다.

일반적으로 우리는 axios의 4가지 기본 메서드를 사용하기 위해 지정해야할 것들이 있다.

4가지 기본 Params

• Method
• Url
• Data (optional)
• Params (optional)

axios({
    method: "get",
    url: "url",
    responseType: "type"
}).then(function (response) {
    // response Action
});

1. axios.get()

get 메서드를 단축된 속성으로 사용하려면 get 메서드를 사용하면 된다.

get 메서드에는 2가지 상황이 크게 존재한다.

단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우
파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

2가지 상황에 따라 params: {} 객체가 존재할지 안할지가 결정된다.

단순 데이터를 요청할 경우

// callback 을 사용할 때,
axios.get("url")
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    }).then(function() {
        // 항상 실행
    });
    
// async await 함수를 사용할 때, 

try {
	const data = await axios.get("url");
} catch {
	// 오류 발생시 실행
}

axios.get("url", {
      params: {
        id: 123
      }
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    }).then(function() {
        // 항상 실행
    });
   
   
// async await 함수를 사용할 때, 

try {
	const data = await axios.get("url", params: { id: 123 });
} catch {
	// 오류 발생시 실행
}

2. axios.post()

post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.

위에서 봤던 get 메서드에서 params를 사용한 경우와 비슷하게 수행된다.

axios.post("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    }).then(function() {
        // 항상 실행
    });
    
// async await 함수를 사용할 때, 

try {
	const data = await axios.post("url");
} catch {
	// 오류 발생시 실행
}

3. axios.put()

put 메서드는 서버 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태이다.

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    }).then(function() {
        // 항상 실행
    });
    
// async await 함수를 사용할 때, 

try {
	const data = await axios.put("url", { username: "", password: ""});
} catch {
	// 오류 발생시 실행
}

4. axios.delete()

delete 메서드에는 일반적으로 body가 비어있다.

그래서 형태는 get과 비슷한 형태를 띄지만 한 번 delete 메서드가 서버에 들어가게 된다면 서버 내에서 삭제 process를 진행하게 된다.

일반적인 delete

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
  
  // async await 함수를 사용할 때, 

try {
	const data = await axios.delete("url");
} catch {
	// 오류 발생시 실행
}