[💻 코드스테이츠 FE 44기] Fetch API, Axios

✔️ 시작

fetch API를 이용한 callback, promise, promise all, asyn/await를 주제로한 과제를 페어활동을 통해 진행했다.

---

📍 알게 된 점

✔️ API

• Application Programming Interface (애플리케이션 프로그램 인터페이스)의 줄임말
• 서버와 통신할 수 있도록 도와 주는 언어나 메시지 형식 (중간 역할자)

✔️ fetch API

• 빌트인 API라 별로 설치가 필요하지 않다.
• json() 메서드를 사용해야한다.
• 리턴 값 : promise이며 그 리턴 값은 response 객체로 돌려준다.

  리턴된 값은 .then, .catch 메서드를 가질 수 있다.

- JSON.parse()

• json문자열을 javascript 값이나 객체로 생성해 준다.

JSON.parse(text[, reviver])

cosnt json = '{...}'
const obj = json.JSON.parse(value)

- json()

• promise로 리턴해 준다.

fetch 진행 순

promise ➤ then ➤ response.json() ➤ then

then으로 값을 리턴하면 다음 then이 있을 때 그 곳으로 전달 된다.

- promise all을 이용한 fetch 사용

return Promise.all([...]) // [response]
.then((result) => {
	return result.json() // [promise] promise 생성(변환)
})

과제를 진행 하면서 막혔던 부분이
promise로 리턴해 달라고 하는데 계속 object 리턴되는 문제였다.

원하는 값은 맞는데 object 타입으로 나와 알아보니
.then 내부에 리턴을 해줘야 promise로 리턴되는 거 같다.

외부로 리턴할 경우 object로 리턴되는 것 같다.

- ayns/awiat 을 이용한 fetch 사용

async function func(){
	await fech().then(response => response.json());
}

• await는 async 함수 내부만 존재하고 async가 없이 await 사용 할 경우 에러가 난다.

✔️ Axios

• 써드 파티 라이브러리로 설치가 필요하다.
• 자동으로 json데이터 형식으로 변환 된다.

- get() 요청

• 정보를 요청하기 위해 사용하는 메서드
  - 첫번째 인자 : url주소 (필수)
  - 두번째 인자 : 요청시 사용할 수 있는 옵션 (필수x)

axios.get('url', [config])

- post() 요청

• 서버에게 데이터를 보내기 위해 사용되는 메서드
  - 첫번째 인자 : url주소 (필수)
  - 두번째 인자 : 요청시 보낼 데이터 설정 (필수는 아니지만 상황에 따라 설정)

axios.post

---

✏️ 마치며

fetch API를 이용한 callback, promise, promise all, asyn/await를 주제로한 과제를 진행했는데

이론으로 하는 거 보단 직접 작성해 봐야 이해가 되는거 같다.

이번 기회를 통해 비동기에 대해 이해 할 수 있는 계기가 되었고
promise all을 자주 사용한다고 하니 자주 연습해 봐야할 거 같다.

다음 수업부터 React를 배운다.
Javascript 는 선행학습을 했지만 React는 별로 배운게 없어서 이번에 미리 예습해야겠다.