다양한 형태의 axios

 

1. 다양한 형태의 axios 

 axios는 서버로 HTTP 요청을 보내고 응답을 받는 데 사용되며, 다양한 형태로 사용할 수 있습니다.

get요청의 예시 입니다.

1-1. 기본적인 GET 요청:

await axios.get(url);

가장 기본적인 GET 요청을 보내는 방법입니다. axios.get() 메서드를 사용하여 지정된 url로 GET 요청을 보내고, 응답을 받습니다. 이때 await 키워드를 사용하여 비동기적으로 응답을 기다립니다.

 

1-2. GET 요청에 파라미터 전달:

await axios.get(url, { params: params });

GET 요청 시 쿼리 파라미터를 전달하는 방법입니다. axios.get() 메서드의 두 번째 인자로 객체를 전달하고, params 속성을 사용하여 쿼리 파라미터를 설정합니다. 이렇게 전달된 파라미터는 요청 URL에 쿼리 문자열로 포함됩니다.

 

1-3. 에러 처리를 포함한 GET 요청:

await axios.get(url).catch(error => {
  // 에러 처리 로직
});

GET 요청 시 에러 처리를 포함하는 방법입니다. axios.get().catch() 구문을 사용하여 요청이 실패한 경우 에러를 처리할 수 있습니다. 이 경우에는 catch 블록 안에 에러 처리 로직을 작성합니다.

 

1-4. 체인 형태의 GET 요청:

await axios.get(url)
  .then(response => {
    // 성공적인 응답 처리 로직
  })
  .catch(error => {
    // 에러 처리 로직
  });

GET 요청을 체인 형태로 연결하여 성공적인 응답과 에러 처리를 모두 다루는 방법입니다. axios.get().then().catch() 구문을 사용하여 요청 결과에 대한 성공 및 실패 처리 로직을 작성할 수 있습니다. then 블록은 성공적인 응답을 처리하고, catch 블록은 요청 실패 또는 에러 처리를 다룹니다.

 

2. response이용

요청으로 받아온 응답의 형태입니다.

data안에 필요 데이터가 있습니다.

response 형태

 

2-1. 직접 받기

let result = await axios.get(url);
if(result.data != null){
	//
}

 

2-2. 함수 리턴값으로 받기

let result = sendMsg(url);

sendMsg(url){
	reutrn(await axios.get(url)).data;
}

 

2-3. callback함수 이용

let result = sendMsg(url, function(){});
sendMsg(url, callback){
	await axios.get(url)
    .then(response => {
    	callback(response.data);
    })
    .catch(error => {
    	VueSimpleAlert.alert(i18n.global.t(error), i18n.global.t('Error'), 'error');
    });

}