https://www.youtube.com/watch?v=m0icCqHY39U
https://ko.javascript.info/promise-basics
fetch 함수에 마우스를 올려보면 무슨 창이 뜬다.
여기서 잠깐, 일반적인 코드의 진행방향은 위에서 아래이다.
단, 오래 걸리는 작업은 대기시간이 생긴다,
1) 세탁기 돌리기
2) 빨래 널기
3) 욕실 청소
를 해야한다고 치는데, 세탁기를 돌려야 빨리 널기를 할 수 있다고
그 시간동안 세번째인 욕실 청소는 그대로 방치하고 있는것과 비슷하다.(동기적)
-
여기에서 콜백(함수를 미리 넣어놓는 것) 을 이용해서 통신 이후 응답이 오면
코드를 수행하게 만드는것이다, (비동기 프로그래밍) -
미리 어떻게 해줘야할지 콜백을 넣는것이 비동기 프로그래밍이다.
fetch("https://jsonplaceholder.typicode.com/posts/1")
//json()을 사용하면 응답 내용에서 json데이터를 자바스크립트 객체로 바꿔준다.
//json데이터를 받는 주소이면 .then((response) => response.json())코드 고정
.then((response) => {
console.log(response)
return response.json()
})
//여기에서 값을처리하고 그 값이 처리되면 result로 받겠다는것.
//그것이 비동기 프로그래밍이다.
.then((result) => {
console.log(result);
document.querySelector('#first').innerHTML = result;
});동기
- 판매자가 택배상자에 상품넣기
- 구매자가 택배상자 받기
- 구매자가 택배상자 열기
- 구매자가 상품 꺼내기
프로미스 - 상품이 나중에 들어오는 택배상자
- 판매자가 프로미스를 구매자에게 보냄.
- 구매자가 택배상자를 받았으나 안에 상품이 없는 상태.
- 상품이 없으면 안 열림 / 상품이 있으면 자동으로 열림
<body>
<script>
const bool = true;
//프로미스
const promise = new Promise((reso, reje) => {
//프로미스 내에서 작업을 하고, 작업이 상공하면 resolve 실행 / 실패하면 reject 실행 하게 하는 코드
if(bool){ // 자동적으로 true 인 경우.
// 이런 경우를 콜백함수라 한다, resolve란 함수를 받아서 저 아래에서 또 실행하고있다.
reso("작업성공");
}else{
reje("작업실패");
}
});
//resolve (1번)로 결과가 나오면 then안에 있는 콜백함수가 실행된다.
//reject (2번)로 결과가 나오면 catch안에 있는 콜백함수가 실행
//파이널리는 어떻게 결과가 나오든 무조건 실행된다.
// promise.then().catch().finally();
promise
.then((value)=>{
console.log(value);
})
.catch((value)=>{
console.log(value);
})
.finally(()=>{
console.log("finally");
})
console.log("프로미스 작성 이후 코드");
</script>
</body>택배로 비유하는 프로미스
<script>
// 할 일
// 세탁기 돌리기 - 끝나면 빨래 널기 - 라면 먹기
// 세탁기 돌리기를 Promise, 세탁기가 다 돌아가면 "빨래감을 널겠습니다" 메시지 출력.
// 라면 다먹으면 "라면을 먹었습니다."
const 세탁기돌리기 = new Promise((세탁기끝)=>{
setTimeout(() => {
세탁기끝("a");
}, 400);
}).then(() => {
console.log("빨래감을 널었습니다");
});
console.log("라면을 먹는다");
</script>