fetch와 promise
생일 출력 사이트를 만들면서 fetch를 사용했다 fetch를 이용해서 json 데이터(pormise형태) 를 받아서 다시 html에 보여주는 방식으로 사용했다
fetch를 이용하기전에 먼저 알아야 할 것이 있다
동기와 비동기
동기(Synchronous)는 요청을 순서대로 처리하는것으로 내가 작성한 순서대로 프로그램이 동작하는 것이다
하나를 다 완료하고 다음것을 실행한다
1
2
3
4
5
6
console.log("1");
console.log("2");
console.log("3");
//1
//2
//3
위 예시는 동기적이라서 1,2,3이 순서대로 콘솔에 나타나게 된다
- 비동기(Asynchronous)는 요청한 순서대로 시작은 하지만 비동기적으로 처리된 부분은 따로 완료가 되지 않아도 다음 작업을 실행시킬수 있다
1
2
3
4
5
6
7
8
console.log("1");
console.log("2");
setTimeout(function(){console.log("3")}, 7000);//비동기적
console.log("4");
//1
//2
//4
//3
동기와 비동기적을 느낄수 있는 예시로 검색창에 ‘ㅁ’만 검색해도 연관 검색어가 아래에 바로 나오게 된다 글자를 바꾸면 연관 검색어도 같이 바뀐다
이것은 브라우저가 새로고침 없이 새로운 데이터를 받고 있다는것을 보여준다 만약 동기적으로 만들었으면 웹은 검색어를 바꿀 때마다 연관검색어를 바꿔주지 못 할 것이다 js에서 통신 api에 fetch를 통해서 비동기적 통신을 할 수 있다
fetch
fetch는 js에서 통신을 할때 사용한다 서버와 통신이라 언제 완료될지 모르기 때문에 비동기적으로 작동한다
1
2
3
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));
위 코드는 json파일에 텍스트 형식으로 데이터가 저장되어 있는데 이 데이터들을 js데이터 형식으로 바꿔서 받을 수 있다면 매우 편하게 프로그래밍을 할 수 있다 따라서 json에 데이터를 가져와서 js데이터 형식으로 바꾸는 과정이 위 코드이다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
a = fetch('http://example.com/movies.json');
console.log(a) //promise
fetch('http://example.com/movies.json')
.then((response) => {
t = response.json()
console.log(t); //promise
return t;
})
.then((data) => console.log(data));
.catch((error) => {
console.error('실패:', error);
});
</script>
fetch는 Response를 반환하고 response.json()을 통해서 js데이터 형식으로 변경 되어야하지만 위 콘솔에서는 response.json()후에 또 promise가 반환 되었다
이 이유는 아직 데이터를 다 받지 못한 상태라서(body가 오지 않음) promise로 반환되었고 promise 형태라 다시 then을 이용해서 js데이터로 사용할 수 있다 -> then이 두번 나오는 이유
응답 body로 json 데이터를 주지 않는데 Response Object의 json()을 호출하면 에러가 납니다.
위 과정을 글로 나타 내면
fetch 요청
- Promise
반환 - Response를 꺼내고 json메소드 실행 아직 Promise
- Promise 반환
- data꺼냄
Promise
promise는 두개의 메소드(함수)를 가지는데 then과 catch이다 then은 then안에 들어가는 callback함수가 성공하면 실행하고 catch는 안에 들어가는 callback함수가 실패하면 실행된다 이렇게 promise는 2가지 메소드로 비동기적 작업의 성공 실패를 표준화된 처리할 수 있기 때문에 사용한다