2021년 2월 1일 복기(TIL Promise)

Bare Minimum Requirements

1. 비동기를 사용할수 있는 세가지 패턴?

• callback, promise, async await
  callback : 콜백함수를 넘겨줘서 기존함수 후에 실행시키는거
  promise : 프로미스객체를 만들어서 promise 메소드를 이용하는거
  async await : 프로미스객체를 사용하는건 같지만 async await 문법을 쓴다.(es8)

2. .then(param) ==> resolve('hello')이다.

callback 함수 : 인자로 사용되는 함수
callback함수의 인자값이 resolve의 인자값이다.

param = 'hello'이다

resolve, reject에 넣는 인자 : 인자로 사용되는 callback함수의 parameter로 사용할 수 있다.

어떠한 함수를 만들고 함수의 return값으로 어떠한 parameter를 써도 상관없다.
ex) callback

resolve : promise가 성공했을때 나오는 method이다.
reject : promise가 실패했을때 나오는 method이다.

callback 인자로 사용되는 함수인데
함수가 실패 했을때.

3. .then / .catch

.then : promise가 성공한 다음에 작동하는 메소드
.catch : promise가 실패한 다음에 작동하는 메소드

대기(pending): 이행하거나 거부되지 않은 초기 상태.
이행(fulfilled): 연산이 성공적으로 완료됨.
거부(rejected): 연산이 실패함.

await 키워드 다음에 등장하는 함수 실행은, 어떤 타입을 리턴할 경우에만 의미가 있나요?
=> promise객체를 소환한다.
=> function을 인자값으로 callback으로 항상 가지고 있다.

then 메소드면 return값이 다음에 실행될 인자값으로 들어간다.
return된 값은 다음에 들어가는 인자값으로 실행된다.
resolve를 쓰러면 return된 값을 사용한다.

async func() {}; 선언식
const func = async function() {}; 표현식
const func = async () => {}; 표현식 애로우

const readAllUsersChaining = () => {
  let arr = [];
  return getDataFromFilePromise(user1Path)
    .then((user1) => {
      arr.push(JSON.parse(user1));
      return getDataFromFilePromise(user2Path);
    })
    .then((user2) => {
      arr.push(JSON.parse(user2));
      return arr;
    })
    .catch((err) => console.log(err));
};

  let arr = [];

  const resolve1 = data => {
    arr.push(JSON.parse(data));
    return getDataFromFilePromise(user2Path);
  }

  const resolve2 = data => {
    arr.push(JSON.parse(data));
    return arr;
  }

  const rejected = err => { console.log(err) };

  return getDataFromFilePromise(user1Path)
    .then(resolve1)
    .then(resolve2)
    .catch(rejected);
}

Promise.all()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

/// Promise is a Javascript object for asychronous operation.

// state: pending -> fullfiled or rejected

// Producer vs Consumer

// 1. Producer
// when we Promise is created, the executor runs automatically.

const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read file);
  console.log("doing something...");
  setTimeout(() => {
    resolve('ellie')
    reject(new Error('no network'))
  }, 2000)
});


/// 2. Consumers : then, catch, finally 

promise
  .then((value) => {
    console.log(value);
  })
  .catch(error => {
    console.log(error)
  })
  .finally(() => {
    console.log('finally')
  })