Axios

비동기 통신 JavaScript 라이브러리

특징

요청과 응답을 모두 JSON 형식으로 자동 변환시켜 준다

사용법

기본

const axios = require(`axios`)

axios.get('...')

   // 응답(성공)
   .then(function(response){
   	console.log(response);
   })
   
   // 응답(실패)
   .catch(function(error) {
   	console.log(error);
   })
   
   // 응답 (항상 실행)
   .then(function(){
   	// ...
   })

async await 사용

async function ...(){
	try{
  	const response = await axios.get('...');
      console.log(response);
  	} 
  	catch(error){
  	console.error(error);
  	}
}

전송

1. GET

서버로부터 데이터 받아옴

• URL에 변수(데이터)를 포함시켜 요청
• 데이터를 Header에 포함하여 전송
• URL에 데이터가 노출되어 보안에 취약
• 캐싱 가능

캐싱 : 한번 접근 후 재요청시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것

const axios_get = () => {
	axios.get("http://localhost:8080/get")
    	.then((response) => {
        	console.log(response);
        })
        .catch((error) => {
        	console.log(error);
        })
}

2. POST

서버로 데이터를 전송하여 자원을 생성

• JSON 형식이나 객체 형식으로 데이터를 전송 가능
• URL에 변수(데이터)를 노출하지 않고 요청
• 데이터를 Body에 포함시킨다.
• URL에 데이터가 노출되지 않아서 기본 보안 되어 있음
• 캐싱 불가능
• 문자열 뿐만 아니라, 라디오 버튼, 텍스트 박스와 같은 객체들의 값도 전송 가능

const axios_post = () => {
	const data = {
    	name : 'name',
        age: 23
    }
    
    axios.post("http://localhost:8000/post", data)
    	.then((response => {
        	console.log(response)
        })
        .catch((error) => {
        	console.log(error);
        })
}

3. PUT

서버에 존재하는 Database 자원을 수정

4. DELETE

서버에 존재하는 Database 자원을 삭제

// DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣기
const axios_delete = () => {
	axios.delete("http://localhost:8080/delete",
    {
    	data: {
        	postId: ...
            commentId: ...
        }
    });
}

config option과 응답 스키마

{
	// `data`는 서버가 제공한 응답(데이터) 입니다.
    data: {},
    
    // `status`는 서버 응답의 HTTP 상태 코드입니다.
    status: 200,
    
    // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
    statusText: 'OK',
    
    // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
    headers {},
    
    // `config`는 요청에 대해 `axios`에 설정된 구성(config) 입니다.
    config: {},
    
    // `request`는 응답을 생성한 요청입니다.
    // 브라우저: XMLHttpRequest 인스턴스
    // Node.js: ClientRequest 인스턴스(리디렉션)
    request: {}
}

async, await

JavaScript에서 가장 최근에 등장한 비동기 처리 패턴
Promise 를 편하게 사용 가능

async

• async 키워드는 함수의 앞에 붙어서 사용
• async를 사용하게 되면 항상 Promise 를 반환
• 만약 반환값이 Promise가 아니라면 이행상태의 Promise(Resolved Promise) 형태로 값을 감싸 반환

const async = async () => {
	return "test";
}

console.log(async());
async().then((data) => {
	console.log(data);
})

await

• await 키워드는 async 함수 안에서만 사용할 수 있다
• 함수 안에서 await를 만나게 되면 Promise가 처리될 때까지 대기
• await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있습니다.

---

Reference
https://velog.io/@bey1548/axios-await-async