Promise rejection regardless of configuring catch clause on caller

Question

In the context of this article : async function. In section "Examples"

function resolveAfter2Seconds() {
  console.log("starting slow promise")
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("slow")
      console.log("slow promise is done")
    }, 2000)
  })
}

function resolveAfter1Second() {
  console.log("starting fast promise")
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("fast")
      console.log("fast promise is done")
    }, 1000)
  })
}

async function concurrentStart() {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds() // starts timer immediately
  const fast = resolveAfter1Second() // starts timer immediately

  // 1. Execution gets here almost instantly
  console.log(await slow) // 2. this runs 2 seconds after 1.
  console.log(await fast) // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
}

It says : In concurrentStart, if promise fast rejects before promise slow is fulfilled, then an unhandled promise rejection error will be raised, regardless of whether the caller has configured a catch clause.

I didn't get that so i did little google and found this code snippet :

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() becomes a rejected promise
f().catch(alert); // TypeError: failed to fetch // (*)

The above code works, it has a catch clause configured to caller.

So i am not getting why on promise rejection we will get error ??

Only observation i can make is that when promise corresponding to resolveAfter1Second() will rejected the execution of function concurrentPromise is halted by awaiting on Promise of resolveAfter2Seconds(). But i am unable to connect dots between this observation and above statement made in article.

You haven't actually quoted the `concurrentStart` function from the linked article, which is the one referred to. As you observed, and as also stated in that note, `concurrentPromise` allows errors to be caught. — Robin Zigmond, May 18 '20 at 19:09
Well your working example doesn't resemble `concurrentStart` in any significant way. There `f` returns a promise and therefore, if that promise is rejected, it can be handled by a `catch` method on `f() `. Although `concurrentStart` also returns a promise, it's not directly related to `slow` and `fast`, so if they reject, you can't handle them. The note was contrasting this with returning `Promise.all` called with the array of promises, which by design rejects whenever (and as soon as) any of the individual promises reject. — Robin Zigmond, May 18 '20 at 19:22

score 0 · Answer 1 · answered May 18 '20 at 19:28

The problem is explained better and in greater detail in Waiting for more than one concurrent await operation and Any difference between await Promise.all() and multiple await?.

The MDN article does a bad job here. What the warning refers to is what happens when the two called functions return promises that will reject. The proper example code for that scenario is

function rejectAfter2Seconds() {
  console.log("creating slow promise")
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      reject("slow error")
      console.log("slow promise is broken")
    }, 2000)
  })
}

function rejectAfter1Second() {
  console.log("creating fast promise")
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      reject("fast error")
      console.log("fast promise is broken")
    }, 1000)
  })
}

async function concurrentStart() {
  console.log('==CONCURRENT START with await==');
  const slow = rejectAfter2Seconds() // starts timer immediately
  const fast = rejectAfter1Second() // starts timer immediately

  console.log(await slow) // waits two seconds
  console.log(await fast) // causes unhandled rejection after one second
}
concurrentStart().catch(err => {
//               ^^^^^^ we can attach an error handler to the promise, but
  console.log(err); // it handles only one error
});
window.onunhandledrejection = err => {
  console.error(err.reason); // and we still get an unhandled rejection
};

Promise rejection regardless of configuring catch clause on caller

1 Answers1