javascript - 打破 Catch block 内的异步函数

Question

我有以下功能:

async myFunction() {
    await this.somePromiseFunction().then(
      () => alert('Promise Complete!'),
      () => {
        throw new Error('Error');
      }
    ).catch(() => {
      alert('End the Function Here');
      });

    alert('Do not get called if error caught above.');
    await this.anotherPromiseFunction().then(
      () => alert('Promise Complete!'),
      () => {
        throw new Error('Error');
      }
    ).catch(() => {
      alert('End the Function Here');
      });
}

我希望当 promise 返回处理程序中捕获错误时，它会结束异步函数，因为我不希望它在这种情况下继续。

Answer 1

不要将 await 与 .then() 混合使用，只需在 try 中直接 await 每个异步函数调用即可> 适本地阻止并处理错误。

如果异步函数返回被拒绝的 Promise，await 将导致拒绝从 try block 中抛出并被捕获，从而跳过内部控制流的其余部分尝试。

const asyncFactory = label => async () => {
  await new Promise(resolve => { setTimeout(resolve, 1000); });

  if (Math.random() < 0.25) {
    throw new Error(`${label} Error`);
  }

  console.log(`${label} Complete!`);
};

const somePromiseFunction = asyncFactory('somePromiseFunction');
const anotherPromiseFunction = asyncFactory('anotherPromiseFunction');

async function myFunction() {
  try {
    console.log('Start myFunction here');
    await somePromiseFunction();
    await anotherPromiseFunction();
  } catch (error) {
    console.log('Error caught:', error.message);
  } finally {
    console.log('End myFunction here');
  }
}

myFunction();

您实际上可以在不使用 async 和 await 的情况下实现等效的效果，并且不需要嵌套您的 Promise 来这样做:

const asyncFactory = label => () => {
  return new Promise(resolve => {
    setTimeout(resolve, 1000);
  }).then(() => {
    if (Math.random() < 0.25) {
      throw new Error(`${label} Error`);
    }

    console.log(`${label} Complete!`);
  });
};

const somePromiseFunction = asyncFactory('somePromiseFunction');
const anotherPromiseFunction = asyncFactory('anotherPromiseFunction');
const oneMorePromiseFunction = asyncFactory('oneMorePromiseFunction');

function myFunction() {
  console.log('Start myFunction here');

  return somePromiseFunction().then(() => {
    return anotherPromiseFunction();
  }).then(() => {
    return oneMorePromiseFunction();
  }).catch(error => {
    console.log('Error caught:', error.message);
  }).finally(() => {
    console.log('End myFunction here');
  });
}

myFunction();

请注意Promise.prototype.finally()实际上是 ECMAScript 2018 的一部分，因此如果浏览器本身支持它，它也已经支持async和await。然而，它可以是 polyfilled而async和await则不能。