TIL 32- 비동기 promise,fetch
비동기 부분은 나중에 꼭 다시 몇 번 더 복습해야겠다.
기본적인 사용은 익숙해졌지만 비동기를 완벽히 이해하고 쓴다는 느낌은 받지 못하고 있다. 주어진 문제는 풀 정도이지만, 상황에 맞게 promise를 잘 이용해서 스스로 코드를 짤 자신은 없달까.
내가 이해한 "비동기"
👉 비동기적으로 일어나는 애들을 시간차로(순서대로) 제어하는 게 promise, callback, async
👉 promise, callback, async는 기능은 같은데 형식만 다름
이 callback코드를 통해 비동기가 무엇인지 알 수 있다 : 이전 작업 완료 안돼도 다음 작업 실행시키는 것.
words[0], [1], [2], [3] 가 순서대로 실행되지 않는 이유 : setTimeout으로 random 한 숫자가 나와서 random초 만큼 words[0], [1], [2], [3] 가 돌아가며 실행되기 때문
그래서 실행될때마다 (enter 누를때마다) 부여된 초가 달라지면서 계속 랜덤한 순서로 0123 3201 2013 0312 ... 이런식으로 랜덤으로 계속 다르게 출력
✅ 면접관의 함정에 빠지지 않는 법 👍
동기적으로 실행되면, word[0] 완료 후 word[1] 로 넘어가서 작업시작하는 것 ▶️ sync + blocking
비동기적으로 실행되면, 앞 작업이 완료되지 않아도 그 다음 작업 실행시키는 것 ▶️ async + non-blocking
동기와 비동기 ( synchronous vs. asynchronous )
blocking 동기 (ex.전화) 요청에 대한 결과가 동시에 일어난다 → 하나의 작업이 다 끝나고서야 다음 작업으로 넘어가는 방식 ➡️ JavaScript
non-blocking 비동기 (ex.문자) 요청에 대한 결과가 동시에 일어나지 않는다 → 요청에 blocking이 없다. 응답은 비동기 영역으로 들어간다. ➡️ 비동기 처리를 도와주는 Promise
비동기는 요청에 대한 결과가 event에 의해서 eventHandler가 실행된다.
비동기 (asynchronous operation) 왜 사용할까 ?
☑️ to do heavy work (network, read files)
Promise is a JavaScript object for asynchronous operation.
✅ 내가 어떻게든 꼭 비동기를 써야할 일이 생겼을 때. ex) fetch (네트워크 요청)
✅ ABCD가 있으면, AB순서대로 , CD는 상관 없이 실행시켜야 할 때, AB실행시 비동기 콜백을 쓰겠고, CD는 상관없게 됨.
왜 error를 잡아주는 reject,catch를 쓸까?
한 페이지 상에서 위 동영상 밑 라이브댓글창으로 구성되어 있다고 치자 (서버 2개가 있는거임)
라이브댓글창 에러났다고 전체 페이지가 안보일 필요는 없다
하나가 에러나도 다른 하나는 잘 돌아가게끔.
Promise
자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object
정해진 장시간의 기능을 수행하고 나서, 정상 수행되어졌다면 성공의 메세지와 함께 처리된 결과값을 전달
기능 수행 중 예상치 못한 문제 발생시 error 전달
❗️ Promise 안에서 'ok' 찾는 방법
Promise 의 prototype에 들어있는 .then() 메소드를 통해서만 ok를 찾을 수 있음 (prototype 부분 참고)
그래서 Promise에는 .then()을 꼭 사용해야 함!
1. Producer
When new Promise is created, the executor(callback함수) runs automatically.
resolve
기능을 정상적으로 수행해서 마지막에 최종 데이터를 전달하는 resolve라는 callback 함수
resolve(1)이면 1은 성공적으로 가공된 데이터
.then 으로 이 데이터 사용 가능
const promise = new Promise((resolve, reject) => { //Promise 라는 class는 JS에서 제공하는 object
setTimeout(() => {
resolve('ellie');
}, 2000);
});
▶️ 어떤 일을 2초정도 하다가 결국에는 잘 마무리해서 resolve라는 callback함수를 호출하면서
'ellie'라는 값을 전달해주는 promise reject
기능을 수행하다가 중간에 문제가 생기면 호출하게 될 reject
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('no network')); // no network는 에러의 이유
}, 2000);
});
▶️ reject는 보통 Error라는 object를 통해 값을 전달한다. (Error가 났다는 걸 의미)
▶️ Error라는 class는 자바스크립트에서 제공하는 object
2. Consumer (Promise 사용하기)
.then , .catch , .finally를 이용해서 값을 받아올 수 있다.
📌 .then 성공 (resolve와 함께 사용)
fulfilled된 결과값을 이어서 쓸게! .then (() => {
promise.then((value) => {
// promise 값이 정상적으로 잘 수행이 된다면, then, 어떤 값(value)을 받아올거야.
console.log(value)
//하면, 2초 후 콘솔에 ellie가 나옴. 위에 resolve('ellie')니까.
Promise가 잘 실행되어, 최종적으로 resolve 콜백함수를 통해 전달한 'ellie'라는 값이 value라는 parameter로 전달되어 들어온다.
})📌 .catch → 실패 (reject와 함께 사용)
catch는 error잡아주는거기 때문에 catch 쓰기 전까진 콘솔에{< rejected >:1} 이런식으로 나옴 (1은그냥 new Promise값이라 가정)
catch 쓰면 {< fulfilled >:undefined} 이렇게 뜸
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('no network')); //Error라는 class는 JS에서 제공하는 object
}, 2000);
});
promise.catch(error => {
console.log(error);
});