异步编程模式

JavaScript异步编程模式

Promise编排

异常处理

最容易犯的错误，没有使用 catch 去捕获 then 里抛出的报错：

// snippet1
somePromise()
  .then(function() {
    throw new Error("oh noes");
  })
  .catch(function(err) {
    // I caught your error! :)
  });

// snippet2
somePromise().then(
  function resolve() {
    throw new Error("oh noes");
  },
  function reject(err) {
    // I didn't catch your error! :(
  }
);

这里的问题在于snippet2在function resolve中出错时无法捕获。而catch则可以。

下面的两个示例返回结果是不一样的：

// example1
Promise.resolve("foo")
  .then(Promise.resolve("bar"))
  .then(function(result) {
    console.log(result); // foo
  });
// example2
Promise.resolve("foo")
  .then(function() {
    return Promise.resolve("bar");
  })
  .then(function(result) {
    console.log(result); // bar
  });

example2改变了返回值，因而result发生了变化。

引入此文中对于async/await的循环的写法

async function waitAndMaybeReject() {
  // Wait one second
  await new Promise(r => setTimeout(r, 1000));
  // Toss a coin
  const isHeads = Boolean(Math.round(Math.random()));

  if (isHeads) return "yay";
  throw Error("Boo!");
}

async function foo() {
  try {
    // Wait for the result of waitAndMaybeReject() to settle,
    // and assign the fulfilled value to fulfilledValue:
    const fulfilledValue = await waitAndMaybeReject();
    // If the result of waitAndMaybeReject() rejects, our code
    // throws, and we jump to the catch block.
    // Otherwise, this block continues to run:
    return fulfilledValue;
  } catch (e) {
    return "caught";
  }
}

Promises是为了让异步代码也能保持这些同步代码的属性：扁平缩进和单异常管道。在ES6之前，存在着很多的Promise的支持库，譬如著名的q以及jQuery中都有着对于Promise模式的内在的实现。在ES6之后，笔者是推荐仅使用ES6提供的Promise对象。

避免异步混淆与性能损耗

async/await允许我们以同步的方式编写异步代码，不过这种方式也可能带来额外的性能损耗，或者混淆现有的代码逻辑。

(async () => {
  const pizzaData = await getPizzaData(); // async call
  const drinkData = await getDrinkData(); // async call
  const chosenPizza = choosePizza(); // sync call
  const chosenDrink = chooseDrink(); // sync call
  await addPizzaToCart(chosenPizza); // async call
  await addDrinkToCart(chosenDrink); // async call
  orderItems(); // async call
})();

所有这些语句一个接一个地执行。这里没有并行逻辑。细想一下：为什么我们要在获取饮料列表之前等待获取披萨列表？我们应该尝试一起获取这两个列表。然而，当我们需要选择一个披萨的时候，我们确实需要在这之前获取披萨列表。对于饮料来说，道理类似。因此，我们可以总结如下：披萨相关的任务和饮料相关的任务可以并行发生，但是披萨(或饮料)各自的相关步骤需要按顺序(一个接一个地)发生。

async function orderItems() {
  const items = await getCartItems(); // async call
  const noOfItems = items.length;
  for (const i = 0; i < noOfItems; i++) {
    await sendRequest(items[i]); // async call
  }
}

找出那些依赖其它语句执行的语句，将相互依赖的语句包在一个async函数中，然后并行执行这些async函数。可以利用事件循环来并行运行这些异步非阻塞函数。这样做的两种常见模式是先返回promise和Promise.all方法。

async function selectPizza() {
  const pizzaData = await getPizzaData(); // async call
  const chosenPizza = choosePizza(); // sync call
  await addPizzaToCart(chosenPizza); // async call
}

async function selectDrink() {
  const drinkData = await getDrinkData(); // async call
  const chosenDrink = chooseDrink(); // sync call
  await addDrinkToCart(chosenDrink); // async call
}

(async () => {
  const pizzaPromise = selectPizza();
  const drinkPromise = selectDrink();
  await pizzaPromise;
  await drinkPromise;
  orderItems(); // async call
})()(
  // Although I prefer it this way

  async () => {
    Promise.all([selectPizza(), selectDrink()]).then(orderItems); // async call
  }
)();

在第二个例子中，我们需要处理不确定数量的promise。处理这种情况超级简单：我们只用创建一个数组，然后将所有的promise放进数组中。然后使用Promise.all()，我们就可以并行等待所有的promise处理。

async function orderItems() {
  const items = await getCartItems(); // async call
  const noOfItems = items.length;
  const promises = [];
  for (const i = 0; i < noOfItems; i++) {
    const orderPromise = sendRequest(items[i]); // async call
    promises.push(orderPromise); // sync call
  }
  await Promise.all(promises); // async call
}

最近更新于0001-01-01