동기와 비동기
- 동기 : 코드를 위부터 아래로 차례차례 읽어 처리해주는 것
- 비동기 : 비동기 부분은 일단 건너뛰고 작업을 처리하는 것
왜 써 ?
비동기 함수를 쓰는 이유는 fetch함수와 같이 그 안에서 데이터 처리를 진행 해야 하는데 그때 처리가 완료가 될 때까지 기다렸다가 다음 코드로 넘어가면 실행이 느려질 수 있기 때문에 데이터 처리 부분을 일단 건너뛰고 다음 코드를 읽어준다.
서버로부터 데이터가 넘어오면, 즉 response를 받으면 실행된다.
Ajax
XMLHttpReauest 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다.
- 장점
- jquery를 통해 쉽게 구현 가능
- Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능
- 단점
- jquery를 사용해야 간편하고 호환성이 보장
- promise 기반이 아님
fetch
ES6부터 들어온 JavaScript 내장 라이브러리이다. promise 기반으로 만들어져서 axios와 마찬가지로 데이터 다루기 쉽다
- 장점
- 자바스크크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없다
- promise 기반으로 만들어져서 데이터 다루기 편리
- 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능
- 단점
- 지원하지 않는 브라우저 존재
- 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다
- JSON으로 변환해주는 과정 필요
- axios에 비해 기능이 부족
- 코드
fetch("api 주소", {
method: "POST",
body: JSON.stringfy({
email: this.state.id,
password: this.state.pw,
})
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));axios
promise based HTTP client for the browser and node.js 즉, node.js와 브라우저를 위한 HTTP 통신 라이브러리이다
비동기로 HTTP통신을 가능하게 해주며 return을 promise 객체(심지어 json)로 해주기 때문에 response 데이터를 다루기도 쉽다
- 장점
- response timeout (fetch에 없는 기능) 처리 방법이 존재
- promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
- 브라우저 호환성이 뛰어남
- 단점
- 사용을 위해 모듈 설치 필요
- 코드
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Yongseong', lastName: 'Kim' } }).then((response)=> console.log(response));
JSON 데이터 처리
fetch를 사용한 코드이다.
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())
.then(console.log);fetch()는 .then 메서드에서 처리된 promise를 반환.
JSON 데이터의 포맷이 아니기 때문에 응답 객체의 .json() 메서드 호출, 그러면 JSON 형식의 데이터로 이행(resolve)된 또 다른 promise를 반환한다. 따라서 일반적인 fetch 요청은 두 개의 .then 호출을 갖는다
axios 사용한 코드
const url = "https://jsonplaceholder.typicode.com/todos";
axios.get(url).then((response) => console.log(response.data));응답 데이터를 기본적으로 JSON 타입으로 사용한다. 응답 데이터는 언제나 응답 객체의 data프로퍼티에서 사용할 수 있다
에러 처리
fetch와 axios는 모두 이행(resolve) 되거나 거부(reject)된 프로미스를 반환한다.
promise가 거부되면 .catch를 사용하여 에러 처리한다
