블로깅 챌린지 3주차 Axios

원래는 재귀를 할 생각이었으나..
이번에 서버를 공부하면서 Axios, async/await에 대해 알아두면 좋겠다는 생각이 들어서 주제를 변경했다 😇

💡 Axios ?

---

• axios는 js 기반의 환경에서 HTTP 통신을 수행할 때 사용하는 모듈
• 비동기 통신 javascript 라이브러리
• 요청과 응답을 모두 JSON 형식으로 자동 변환 시켜준다.
• 해당 모듈을 별도의 설정 없이도 사용 가능 , 프로젝트 진행시에는 공통된 옵션을 기본 설정하여 사용할 수 있음

기본 사용방법

---

const axios = require('axios')

axios.get('http://localhost:4000')
	// 응답(성공)
	.then((res) => {
  		console.log(res)
	})
	// 응답(실패)
	.catch((err) => {
  		console.log(err)
	})
	// 응답 ( 항상실행 )
	.then((res) => {
  	// ...
})

1. 전송 (GET)

서버로부터 데이터를 받아옴

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

2. POST

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

• JSON 형식이나 객체 형식으로 데이터를 전송 가능
• URL에 변수(데이터)를 노출하지 않고 요청
• 데이터를 Body에 포함
• URL에 데이터가 노출되지 않아서 기본 보안 되어 있음

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

3. PUT

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

4.DELETE

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

const axios_delete = () => {
  axios.delete("http://localhost:8000",
               {
    			data: {
                  	postId:...
                  	commentId: ...
                }
 	 });
}

💡 Axios를 axync/await를 이용하여 사용하는 법?

---

async/await

• Javascript 에서 가장 최근에 등장한 비동기 처리 패턴

async

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

await

• await 키워드는 async 함수 안에서만 사용할 수 있다

• 함수 안에서 await를 만나게 되면 Promise가 처리될 때까지 대기

• await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있음

• axios를 이용하여 API 호출을 하는 경우 바로 응답이 오지 않기에, 일반적으로 비동기 방식을 사용

• axios 문서에도 기본적으로 사용하는 방식은 Promise-then 방식의 비동기 호출 방식을 소개하고 있음

• 다만 then 방식의 경우도 api호출이 복잡해지면 then을 then 내부에서건 또는 chain 형태로 연달아 쓰는 경우가 발생
  ➡️ 아래 예시로 비교해보자

//then 을 연속적으로 호출하는 예시
const TestApiCall = () => {
  axios.get('http://localhost:3000')
  	.then((res) => {
    	const data = res.data;
    	const userId = data.userId;
    	axios.get('http://localhost:3000' + userId) 
    	  .then((res) => {
            console.log("response :", res.data)
          })
    	  .catch((err) => {
          	  console.log(err)
          })
 	})
  	.catch((errer) => {
    	console.log("ERROR :", err);
  })
}

한눈에 봐도 복잡해보인다..
js에서도 async/await를 이용한 비동기 구문이 추가 되었기에 axios도 이를 지원하고 있음

아래는 async/await를 사용한 예시이다.
➡️ try-catch 방식을 이용함

const TestApiCall = async() {
  try {
    const response = await axios.get('https://localhost:4000')
    const userId = response.data.useerId;
    
    const response2 = await axios.get('http://localhost:3000')
    console.log("response :", response2.data)
  } catch(err) {
    console.log("err :", err);
  }
}

이전 then 방식보다 훨씬 깔끔해진 모습을 볼 수 있음 !