[패스트캠퍼스 수강후기] 프론트엔드 강의 55회차 미션

오늘도 40강에서 프로미스부터 async function까지 수강했고

내일은 프로젝트 예시를 따라할 것 같다

 

Promise

프로미스가 생성될 때 꼭 알 수 없는 값을 위한 대리자

- 대기(pending): 이행하거나 거부되지 않은 초기 상태

- 이행(fulfilled): 연산이 성공적으로 완료

- 거부(rejected): 연산이 실패함

 

//es6부터 자바스크립트의 표준 내장 객체로 추가

  es6을 지원하는 브라우저나 node.js에서 전역에 있는 프로미스 확인 가능

console.log(promise);

(결과) funciton : promise

 

//생성자를 통해서 프로미스 객체를 만들 수 있음

  생성자의 인자로 executor라는 함수를 이용

new Promise(/*executor*/);

 

//executor 함수는 resolve와 reject를 인자로 가짐

 (resolve, reject) => {...}

 이 둘은 함수임, resolve(), reject()

new Promise(/*executor*/(resolve, reject) => {});

 

//생성자를 통해서 프로미스 객체를 만드는 순간 pending 대기 상태라고함

new Promise((resolve, reject) => {}); //pending

 

//executor함수인자중 하나인 resolve함수를 실행하면 fulfilled이행상태가 됨

new Promise((resolve, reject) => {

  //

  // ...

  resolve(); //fulfilled

});

 

//executor함수인자중 하나인 reject함수를 실행하면 rejected 거부상태가 됨

new Promise((resolve, reject) => {

  reject(); //rejected

});

 

//p라는 프로미스 객체는 1000ms(1초)후에 fulfilled됨

new Promise((resolve, reject) => {

  /*pending*/

  setTimeout(() => {

    resolve(); //fulfilled

   }, 1000);

 

});

//p라는 프로미스 객체가 fulfilled되는 시점에 p.then안에 설정한

 callback함수가 실행

const p = new Promise((resolve, reject) => {

  /*pending*/

  setTimeout(() => {

    resolve(); //fulfilled

   }, 1000);

});

 

p.then(/*callback*/);

(수정)

p.then(() => {

 console.log('1000ms후에 fulfilled됩니다');

});

 

//then을 설정하는 시점을 정확히 하고

함수의 실행과 동시에 프로미스 객체를 만들면서 pending이 시작되도록 하기 위해

프로미스 객체를 생성하면서 리턴하는 함수(p)를 만들어 함수 (p)실행과 동시에 then 설정

function p (){

 return new Promise((resolve, reject) => {

    /*pending*/

    setTimeout(() => {

     resolve(); //fulfilled

    }, 1000);

   });

}

 

p().then(() => {

 console.log('1000ms후에 fulfilled됩니다');

});

 

//마찬가지로 프로미스객체가 rejected되는 시점에 p.catch안에 설정한 callback함수 실행

function p (){

 return new Promise((resolve, reject) => {

    /*pending*/

    setTimeout(() => {

    reject(); //rejected;

    }, 1000);

   });

}

 

p().then(() => {

 console.log('1000ms후에 fulfilled됩니다');

}). catch(() => {

 console.log('1000ms후에 rejected됩니다');

});

 

//executor의 resolve함수를 실행할 때 인자를 넣어 실행하면

then의 callback 함수의 인자로 받을 수 있음

resolve('hello');

then((message) => {...})

function p (){

 return new Promise((resolve, reject) => {

    /*pending*/

    setTimeout(() => {

    resolve(hello); 

    }, 1000);

   });

}

 

p()

 .then((message) => {

 console.log('1000ms후에 fulfilled됩니다', message);

}). catch(() => {

 console.log('1000ms후에 rejected됩니다');

});

 

//마찬가지로 executor의 reject함수를 실행할 때 인자를 넣어 실행하면

catch의 callback 함수의 인자로 받을 수 있음

reject('error');

then((reason) => {...})

 

function p (){

 return new Promise((resolve, reject) => {

    /*pending*/

    setTimeout(() => {

    reject(error); 

    }, 1000);

   });

}

 

p()

 .then((message) => {

 console.log('1000ms후에 fulfilled됩니다', message);

}). catch(() => {

 console.log('1000ms후에 rejected됩니다', reason);

});

 

//보통 reject함수를 실행하여 rejected되는 이유를 넘기는데, 표준 내장 객체인 error의 생성자를 이용하여

error 객체를 만듬

function p (){

 return new Promise((resolve, reject) => {

    /*pending*/

    setTimeout(() => {

    reject(new error('bad';)); 

    }, 1000);

   });

}

 

p()

 .then((message) => {

 console.log('1000ms후에 fulfilled됩니다', message);

}). catch(() => {

 console.log('1000ms후에 rejected됩니다', reason);

});

 

//fullfilled되거나 rejected된 후에 최종적으로 실행할 것이 있다면,

 .finally()를 설정하고, 함수를 인자로

function p (){

 return new Promise((resolve, reject) => {

    /*pending*/

    setTimeout(() => {

    reject(new error('bad';)); 

    }, 1000);

   });

}

 

p()

 .then((message) => {

 console.log('1000ms후에 fulfilled됩니다', message);

}). catch(() => {

 console.log('1000ms후에 rejected됩니다', reason);

})

 .finally(() => {

   console.log('end');

});

 

//보통 비동기 작업을 할 때 callback함수를 인자로 넣어 로직이 끝나면

callback함수를 호출, 이런 경우 함수가 아래로 진행되지 않고

callback함수 안으로 진행됨

 

function c (callback) {

  setTimeout(() => {

    callback(); 

    }, 1000);

}

 

c(() =>{

 console.log('1000ms후에 callback함수가 실행됩니다');

 });

 

c(() => {

  c(() =>{

  console.log('2000ms후에 callback함수가 실행됩니다');

     });

});

 

//then 함수에서 다시 프로미스 객체를 리턴하는 방법을 통해 체이닝하면

비동기 작업을 순차적으로 아래로 표현할 수 있음

function p () {

  return new Promise ((resolve, reject) => {

     setTimeout(() => {

    resolve(); 

    }, 1000);

     });

}

 

p().then(() => {

 return p();

})

 

.then(() => p())

.then(p)

.then(() => {

  console.log('4000ms후에 fulfilled됩니다');

})

 

//value가 프로미스 객체인지 아닌지 알 수 없는 경우

사용하면 연결된 then 메서드를 이용

value가 프로미스 객체라면, resolve된 then 메서드를 실행

프로미스 객체가 아니라면, value를 인자로 보내면서 then메서드를 실행

Promise.resolve(/*value*/);

Promise.resolve((new Promise(resolve, reject)) => {

   setTimeout(() => {

    resolve(foo); 

    }, 1000);

 }).then((data) => {

   console.log('프로미스 객체인 경우, resolve된 결과를 받아 then이 실행됨',

   data,

 );

});

 

Promise.resolve('bar').then(data => {

  console.log('then메서드가 없는 경우, fulfilled됩니다', data);

});

(결과) then 메서드가 없는 경우, fulfilled됩니다. bar

프로미스 객체인 경우, resolve된 결과를 받아 then이 실행됨. foo

 

 

//promise.reject를 사용하면 catch로 연결된 rejected 상태로 변경

Promise.reject(/*value*/);

Promise.resject((new Error('reason'))

  .then(error => {})

  .catch(error => {

    console.log(error);

 });

 

//프로미스 객체 여러개를 생성하여, 배열로 만들어 인자로 넣고

promise.all를 실행하면 배열의 모든 프로미스 객체들이 fulfilled되었을 때

then의 함수가 실행됨

then의 함수의 인자로 프로미스 객체들이 resolve인자값을 배열로 돌려줌

//promise.all([프로미스 객체들]);

 

function p(ms) {

 return new Promise((resolve, reject)) => {

   setTimeout(() => {

    resolve(ms); 

    }, ms);

})

}

 

Promise.all([p(1000), p(2000), p(3000)]).then((messages) => {

 console.log('모두 fulfilled된 다음에 실행됩니다', messages);

});

(결과) 모두 fulfilled된 다음에 실행됩니다. [p(1000), p(2000), p(3000)]

 

//프로미스 객체 여러개를 생성하여, 배열로 만들어 인자로 넣고

promise.race를 실행하면 배열의 모든 프로미스 객체들 중 가장 먼저 fulfilled된 것으로

then의 함수가 실행됨

then의 함수의 인자로 가장 먼저 fulfilled된 프로미스 객체들이 resolve인자값을 돌려줌

//promise.race([프로미스 객체들]);

 

function p(ms) {

 return new Promise((resolve, reject)) => {

   setTimeout(() => {

    resolve(ms); 

    }, ms);

})

}

 

Promise.race([p(1000), p(2000), p(3000)]).then((message) => {

 console.log('가장 빠른 하나가 fulfilled된 다음에 실행됩니다', message);

});

(결과) 가장 빠른 하나가 fulfilled된 다음에 실행됩니다. [p(1000)]

 

ASYNC-AWAIT

async function 함수이름 () {}

const 함수이름 = async() =>{}

 

//promise객체를 리턴하는 함수

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    resolve(ms); 

    }, ms);

  });

}

 

//promise객체를 이용해서 비동기 로직을 수행할 때

p(1000).them(ms => {

  console.log('${ms}ms 후에 실행된다.');

});

 

//promise객체를 리턴하는 함수를 await로 호출하는 방법

const ms = await p(1000);

console.log('${ms}ms 후에 실행된다.');

 

(결과) await is only valid in async function

 

//await를 사용하는 경우 항상async함수 안에서 사용되어야 한다

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    resolve(ms); 

    }, ms);

  });

}

 

(async function main () {

const ms = await p(1000);

console.log('${ms}ms 후에 실행된다.');

}) ();

(결과) 정상 실행

 

//promise객체가 rejected된 경우의 처리를 위해 try catch 를 이용한다

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    reject(new Error('reason'));

    }, ms);

  });

}

 

(async function main () {

 try {const ms = await p(1000);

  } catch (error) {

     console.log(error);

  }

}) ();

 

//async function에서 return되는 값은 promise.resolve함수로 감싸서 리턴됨

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    resolve(ms);

    }, ms);

  });

}

 

async function asyncP() {

 const ms = await p(1000);

 return 'mark:' + ms;

}

 

(async function main () {

 try {

  const name = await asyncp();

  console.log(name);

  } catch (error) {

     console.log(error);

  }

}) ();

(결과) Mark: 1000

 

//error의 전파

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    reject(new Error('reason'));

    }, ms);

  });

}

 

async function asyncP() {

 const ms = await p(1000);

 return 'mark:' + ms;

}

 

(async function main () {

 try {

  const name = await asyncp();

  console.log(name);

  } catch (error) {

     console.log(error);

  }

}) ();

 

//finally

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    reject(new Error('reason'));

    }, ms);

  });

}

 

async function asyncP() {

 const ms = await p(1000);

 return 'mark:' + ms;

}

 

(async function main () {

 try {

  const name = await asyncp();

  console.log(name);

  } catch (error) {

     console.log(error);

  } finally {

  console.log('end');

}

}) ();

(결과) error reason end

resolve 쓰면 mark:1000 end

 

<새 예시>

function p(ms) {

 return new Promise ((resolve, reject)) => {

   setTimeout(() => {

    reject(new Error('reason'));

    }, ms);

  });

}

//promise

p(1000)

    .then(() => p(1000))

    .then(() => p(1000))

    .then(() =>{

       consolelog('3000ms 후에 실행');

});

 

//async awiat (한줄 한줄 비동기가 끝나면 실행)

(async function main() {

  await p(1000);

  await p(1000);

  await p(1000);

    consolelog('3000ms 후에 실행');

})();

 

//promise.all

(async function main() {

 const result = await Promise.all [p(1000), p(2000), p(3000)];

 console.log(results);

})();

(결과) 3초 후  [1000, 2000, 3000]

 

//promise.race

(async function main() {

 const result = await Promise.race [p(1000), p(2000), p(3000)];

 console.log(results);

})();

(결과) 1초 후 1000

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스