why the way to call asynchronous is wrong?

Question

  const before = () => {
    const p = new Promise((resolve, reject) => {
      // resolve('before')
      console.log("ok");
      reject(new Error("error!!!"));
    });
    return p;
  };

  const handleClick = () => {
    const p = new Promise((resolve, reject) => {
      resolve(true);
    });
    p.then(() => {
      before();
    })
      // .then(before)
      // .then(async () => {
      //   await before();
      // })
      .then(() => {
        console.log("then");
      })
      .catch((e) => {
        console.error(e);
      });
  };

The above three ways to call 'before' function, the last two ways could catch the exception but not the first one, why and what's the execution sequence of the above code?