BE10 6일차

윤라윤·2022년 11월 7일

Axios

Axios는 브라우저, Node.js를 위한 HTTP 비동기 통신 라이브러리입니다.

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
Promise(ES6) API 사용
Async/Await(ES7) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

Axios 응답 제어

.then

비동기 통신이 성공했을 경우, .then() 은 콜백을 인자로 받아 결과값을 처리할 수 있습니다

.catch

.catch() 를 통해 오류를 처리합니다. error 객체에서는 오류에 대한 주요 정보를 확인할 수 있습니다.

axios.get('/hello')
		 .catch(function (error) {
				if (error.response) {
					console.log(error.response.status);
					console.log(error.response.headers);
				}
			}

위 코드와같이 .catch에서 받아오는 error 객체를 통해 error.response.status 응답 상태코드와 error.response.headers 응답 헤더 정보를 파악할 수 있습니다.

Axios HTTP 요청 메서드

axios.get(url[, config])

서버에서 데이터를 가져올 때 사용하는 메서드입니다. 두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있습니다.

axios.post(url[, data[, config]])

서버에 데이터를 새로 생성할 때 사용하는 메서드입니다. 두 번째 파라미터로 생성할 데이터를 넘깁니다.

axios.put(url[, data[, config]])

특정 데이터를 수정할 때 요청하는 메서드입니다. put 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. post 와의 다른 점은 post 는 여러 번 호출할 경우, 새로운 데이터가 지속적으로 추가됩니다. 반면, put 은 한 번 요청을 하거나 여러 번 지속적으로 요청해도 결과값이 동일합니다. 예를 들어, 유저의 이름을 ”Iron Man” 으로 수정하기 위해 axios.put 요청을 보냅니다. 이때, put 요청을 한 번 보내거나 여러 번 보내도 유저의 이름은 ”Iron Man” 으로 동일하게 수정됩니다.

axios.delete(url[, config])

특정 데이터나 값을 삭제할 때 요청하는 메서드입니다.

Callback

다른 함수의 인자로 이용되는 함수.
function add (x, y) () {
 return x + y
}
//add 함수에서는 인자로 x, y가 들어갑니다. 하지만 인자에는 함수도 들어갈 수 있습니다.
이벤트에 의해 호출되어지는 함수.
function add (x, y, callback){
	let result = x * y
	callback(result)
}
function result (data) {
	console.log(data, "콜백함수 실행")
}
add(5, 10, result)
///add 함수에는 인자로 x, y, callback이 들어가고, callback에는 함수가 들어갑니다. -> add 함수를 실행시키면 add 함수 안에서 인자로 들어간 다른 함수가 실행됩니다. ->add 함수의 인자로 사용된 result 함수를 callback 함수라고 부릅니다.
1-1 동기적 함수
-> 현재 실행 중인 코드가 완료된 후 다음 코드를 실행
2-2비동기적 함수
-> 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행.