promise, then
- 비동기 처리를 효율적으로 수행시켜줌
 - 비동기 처리시 콜백함수를 연달아 적용하여 콜백지옥을 해결해줌
 new Promise수행 순간 코드가 실행되기 때문에 함수안에 넣어줌- function 안에 
return new Promise로 promise를 선언하고 async function에서결과 = await promise가 포함된 함수()방식으로 사용 
콜백지옥 예시
loadScript('1.js', function(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', function(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('3.js', function(error, script) {
          if (error) {
            handleError(error);
          } else {
            // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
          }
        });
      }
    })
  }
});
정리 후
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // 스크립트를 정상적으로 불러왔기 때문에 스크립트 내의 함수를 호출할 수 있습니다.
    one();
    two();
    three();
  });
promise 사용법
1.
new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    // resolve('ellie');
    console.log("hihi")
    // reject(new Error('no network'));
  }, 2000);
});
// doing something...
// 2초후
// hihi
// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });
getHen() //
  .then(hen => getEgg(hen))
  .then(egg => cook(egg))
  .then(meal => console.log(meal))
  .catch(console.log);
// 간략화
getHen() //
  .then(getEgg)
  .then(cook)
  .then(console.log)
  .catch(console.log);
2.
 let func1 = function() {
  console.log("func1 시작");
  return new Promise(resolve => {
    let resolveData = "func1의 데이터를 받았음";
    setTimeout(() => {
      resolve(resolveData);
      console.log("func1 실행완료");
    }, 2000);
  });
};
let test2 = async function() {
  //순서대로 함수를 실행시켜야 하는 경우
  console.log("func1 실행");
  let a = await func1();
  console.log("===============   결과   =============");
  console.log(a);
}
(async () => {
  let aa = await test2();
})
output
// func1 실행
// func1 시작
// func1 실행완료
// ===============   결과   =============
//   func1의 데이터를 받았음
async, await
- 비동기 호출을 수행하는 promise코드를 동기 호출하는 것 처럼 보이게 하는 기법
 - await은 
asnyc function내부에서만 사용 할 수 있고 async function의 return은new Promise임 - async & await는 Promise 객체를 반환하며 ⇒ then을 사용할 수 있다.
 
async
// 1. async
async function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
//Promise { 'ellie' }
//ellie
await
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(2000);
  return '🍎';
}
async function getBanana() {
  await delay(1000);
  return '🍌';
}
async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
//🍎 + 🍌
참고
[1] https://www.youtube.com/watch?v=JB_yU6Oe2eE&t=1330s
[2] https://dewworld27.tistory.com/entry/promise%EB%A1%9C-%EC%BD%9C%EB%B0%B1%EC%A7%80%EC%98%A5callback-hell-%EA%B0%9C%EC%84%A0%ED%95%98%EA%B8%B0
          이 문서는
            jhy156456에 의해 작성되었습니다.
          
          마지막 수정 날짜:2023-08-17 17:30:00