promise 약속
즉, 나는 이걸 실행할꺼야 라고 약속을 하는거죠.
언제쓰냐면, 주로,
서버에서 데이터를 가져올떄씀.
왜 약속을 해야하나?
그냥 내가 일을 처리하면 안되나?
자바스트립트는 싱글 쓰레드이다.
일을 하나밖에 못한다는거다.
즉, 밥을 먹으면서, 전화를 받지 못하는거다. 그게 자바스크립트의 특징이다.
즉, 약속을 하는 이유는,
일을 하나밖에 못하니,
서버에 데이터 내놔라고 요청을 해놓고,
마냥 올떄까지 기다릴수는 없으니(수많은, 일처리가 바쁘기 떄문.)
서버가 데이터를 줄것이라는 약속을 믿고,
나는 일단 다른일을 처리하는겁니다.
Promise는
자바스크립트 비동기 처리에 사용되는 객체이다.
-비동기란, asychronous , 어떤 요청을 보내면 그요청이 끝날떄까지, 기다리는 것이 아니고,
응답에 관계없이 바로 다음 동작이 실행되는 방식임.
-동기는 sychronous , 즉 한작업이 실행되는동안 다른작업은 멈춘상태를 유지하고, 끝나면 그다음께 실행되는것.
그러면,
Promise는 왜? 쓰는지, 뭘할때 쓰는지,
즉,
promise는 비동기 박스이다.
자바스크립트에서,
싱글쓰레드라서, 일을 잘 처리하다가,
어떤 작업은
5초 기다렸다가 5초뒤 실행한다 라는 코드가 있으면,
혹은
사버가 데이터를 줄떄까지,( 언제 줄진모르고, 1초뒤에 줄지, 10초뒤에 줄지 모르지만) 기다리는 코드가 있다면,
이런 코드를 처리를 다할떄까지 기다렸다가,
그 다음 코드를 실행하면,
그 프로그램은 못쓰는 프로그램이다.
왜?
너무 느리고 답답해서,
그래서,
비동기, 즉, 비동기라는것이 있어서,
비동기 코드 즉,비동기 작업을 하는 애는,
만약 몇초뒤에? 실행하는 코드는 비동기박스 안에 넣어두던지, 아니면, 아예 비동기로 짜여진 Api를 써서 그애는 5초뒤에 실행한다.
라는 비동기처리를 따로 해두고,
그냥 그다음 코드로 넘어가면,
자연스럽고, 빠르게
코드가 처리가 되고,
막히는 부분도 거의 없고,
좋다.
그래서
비동기가 필요 한거다.
비동기를 하려면,
앞서 말했듯,
비동기Api 코드를 사용하던지,
아니면,
비동기 박스 (promise 나 asycn await)에 담아서
거기 실행하고픈 코드를 넣어두면, 기다렸다가 데이터가 와서
알아서 받고, 즉, 떄가되면 실행해주는 게 바로 비동기박스라고 내가 표현을 하는거다.
promise
는 객체이다.
프로미스의 상태는 3가지로 나뉜다.
-
pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
-
fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과값을 반환해준 상태
-
rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
프로미스는, 콜백함수를 반환한다.
new Promise ((resolve, reject) => {
if(성공이 들어오면) resolve(정보를 보여줘);
if(실패가 들어오면) reject(이유를 알려줘);
})
예제>
const getData = () => {
// resolve, reject 중 하나는 무조건 사용해야함.
return new Promise((res, rej) => {
res(2);
})
}
console.log(getData()); // 결과는, 즉 반환값은, 2 가 아니고, 프로미스 객체가 나온다. // Promise{: 2}
즉 , 우리는 2를 바로 사용하는게 아니라, 상태가 fulfilled라는 것을 감지를 해서 , 즉, 저렇게 감싸져서 리턴이 된다.
프로미스는 실행이 되면, 프로미스 객체로 값을 감싼다.
즉,
데이터 즉, 2 를 쓸려면,
이 프로미스 객체껍데기가 감싼거를 벋겨서 써야한다.
그 방법이 바로,
then 이다.
이 then을 써서 2 를 얻을 수가 있다..
const getData = () => {
// resolve, reject 중 하나는 무조건 사용해야함.
return new Promise((res, rej) => {
res(2);
})
}
getData()
.then((res) => console.log(res)); // 2
즉, 프로미스를 쓰면 then이 꼭 필요하다.
만약
reject 일경우에는,
catch를 사용하면 된다.
const getData = () => {
// resolve, reject 중 하나는 무조건 사용해야함.
return new Promise((res, rej) => {
rej('ERROR');
})
}
getData()
.then((res) => console.log(res)); // 2
.catch(error) => console.log(error)); // error!
=======================================================
하지만 우리는 Promise then 을 자주 사용하지는 않습니다.
getUser().then((user) =>{
getFather(user.id).then(father) => {
getGrandFather(father.id).then((grandFather) => {
...계속 이어지는,,,
});
});
});
뎁스가 깊어지면, 그안에서 일처리를 계속 해야되므로,,,콜백지옥,,
물런 , 이거는 new Promise 방식으로 처리 할수도 있지만,
요즘은 이렇게 이런방식으로 한다.
await 을 쓰는데,
const user = await getUser();
const father = await getFather(user.id);
const grandFather = await getGrandFather(father.id);
await쓰면된다. 즉, 기다릴께 있는거죠,,,
근데 await을 쓰려면, 무조건 async 함수 스코프 내에 존재해야 한다.
예>
async / await
//arrow function 의 표현방식
const func = async() => {...}
// 일반 fucntion의 표현방식
async function func(){...}
const func = async() => {
const user = await getUser();
const father = await getFather(user.id);
const grandFather = awit getGrandFather(father.id);
}
차이점은,
then , catch 를 쓰면서, 동기적인 작업을 거치며, 비동기 작업시, 작업을하는 과정 및 작업이후의 행동들을 불리를 시켜서 써야했다.
그런데,
asycn , await은 비동기 작업이라는 하나의 흐름속에서 일을 처리 할수가 있다.
딱보면 async await이 있으면, 아 이것은 비동기 작업이구나 라고 생각을 할 수 있는것이뎌.
표현법은 async를 화살표쓸때는,, 중간에넣어쓰고
const func = async() => {...}
아렇게,,쓰고
일반 함수는
async function func(){...}
이렇게 앞에 붙여서 쓴다.
물런
async await 에서도 catch를 할 수 있다.
const getData = () => {
return new Promise((res, rej) => {
rej('ERROR');
})
}
try {
await getData.then((res) => console.log(res))
} catch (error) {
console.log(error)); // error!
}
