JavaScript 약속 tl;dr

Promise에 대한 세부 정보에 대한 빠른 개요입니다. 말은 그만하고 본론으로 들어가자.

약속은 항상 연쇄

then 또는 catch이 약속이 아닌 값을 반환하면 새 약속으로 래핑되고 연결되어 다음 약속으로 전달됩니다. 즉, catch부터 시작하여 값을 반환하고 .then을 반환할 수 있습니다.

여기에 있는 모든 샘플은 Hello World1을 출력합니다.

const appendWorld = s => `${s} World`;
const appendOne = s => `${s}1`;
const log = v => console.log(v);

Promise.resolve('Hello').then(appendWorld).then(appendOne).then(log);
Promise.resolve('Hello').then(v => Promise.resolve(appendWorld(v))).then(appendOne).then(log);
Promise.reject('Hello').catch(appendWorld).then(appendOne).then(log);
Promise.resolve('Blogging').then(() => 'Hello').then(appendWorld).then(appendOne).then(log)

마지막으로

finally 연결할 수 있는 값을 반환할 수 없습니다. 이름에서 암시하는 종류입니다. 이전에 다른 .then 또는 .catch이 호출되었는지 여부에 관계없이 호출됩니다. 어떤 식으로든 약속이 이행되면 .finally이 호출됩니다. 청소 작업에 좋습니다.

예를 들어

Promise.reject()
  .catch(() => console.log('Catch is called'))
  .finally((s) => console.log('finally called'))

출력

Catch is called
finally is called

Promise 내부의 오류는 .catch로 전달됩니다.

Promise.resolve()
  .then(() => {})
  .then(() => { throw new Error('hey') })
  .then(() => console.log('i am never called'))
  .catch(() => console.log('error'));

여러 .catch 문이 유용합니다.

Promise.resolve()
  .then(() => Promise.reject())
  .catch(() => console.log('much rejection'))
  .then(() => console.log('i can continue doing stuff'))
  .then(() => Promise.reject('another one'))
  .catch(() => console.log('catching the second chain'))

비동기 함수는 약속 래퍼입니다.

다음 코드 문은 동일한 효과를 가집니다.

// async
async function foobar() {
  return 'foo';
}

// non-async
function foobar() {
  return Promise.resolve('foo');
}

약속을 기다리는 것은 신중하게 이루어져야합니다

약속을 await 하면 오류가 숨겨질 수 있으므로 "성공"을 확인할 때 주의해야 합니다.

다음 예를 참조하십시오.

const foobar = await Promise.reject(new Error('error thrown')).catch(error => error);

if (foobar) {
  // This does not imply success ⚠️👩‍🚀
} else {
 // This does not imply an error case
}

문제는 제공된 Promise가 제대로 잡혔다는 것입니다. 이제 다시 약속 연결을 참조하면 catch 문의 결과를 연결할 수 있으므로 new Error...을 호출하면 .then이 결과 개체입니다. 그리고 그것은 단순히 그것에 await을 호출하는 것과 같습니다. 따라서 여기 foobar에는 new Error...이 포함되어 있습니다. 이 개체는 if(foobar)을 확인할 때 오류가 발생했지만 true를 반환하는 개체입니다. 그러므로 당신은 당신의 약속이 무엇을 반환하는지 알아야 합니다.

Promise.race 및 Promise.any

race 및 any 둘 다 먼저 약속을 완료합니다. 그러나 큰 차이가 있습니다. race은 해결 또는 거부에 대한 첫 번째 약속으로 완료되는 반면 any은 실제로 해결된 첫 번째 약속으로만 완료됩니다.

이 Promise.race 샘플에서 Promise가 첫 번째이기 때문에 오류가 발생합니다.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 300));
Promise
  .race([promise1, promise2])
  .then(v => console.log('resolved', v))
  .catch(v => console.log('error', v));

이 Promise.any 샘플에서 해결된 약속은 실제로 해결되는 첫 번째 것이기 때문에 승리합니다.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 300));
Promise
  .any([promise1, promise2])
  .then(v => console.log('resolved', v))
  .catch(v => console.log('error', v));

약속.모두

이것은 매우 직관적입니다. 모든 약속이 해결될 때 해결되거나 약속 중 하나가 거부될 때 거부됩니다.

// outputs ['one', 'two']
Promise.all([Promise.resolve('one'), Promise.resolve('two')])
.then((resultArray) => console.log(resultArray))

// outputs 'error'
Promise.all([Promise.resolve('one'), Promise.resolve('two'), Promise.reject()])
.then((resultArray) => console.log(resultArray))
.catch(() => console.log('error'))