[Javascript] Await a JavaScript Promise in an async Function with the await Operator

转载于 2018-12-17 01:43:00 发布 · 135 阅读

文章标签：

本文探讨了如何利用async/await特性与Promise.all方法在JavaScript中实现优雅的异步操作，通过实例展示了从API获取数据并处理响应的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The await operator is used to wait for a promise to settle. It pauses the execution of an async function until the promise is either fulfilled or rejected.

const API_URL = "https://starwars.egghead.training/";

const output = document.getElementById("output");
const spinner = document.getElementById("spinner");

async function queryAPI(endpoint) {
  const response = await fetch(API_URL + endpoint);
  if (response.ok) {
    return response.json();
  }
  throw Error("Unsuccessful response");
}

async function main() {
  try {
    const [films, planets, species] = await Promise.all([
      queryAPI("films"),
      queryAPI("planets"),
      queryAPI("species")
    ]);
    output.innerText =
      `${films.length} films, ` +
      `${planets.length} planets, ` +
      `${species.length} species`;
  } catch (error) {
    console.warn(error);
    output.innerText = ":(";
  } finally {
    spinner.remove();
  }
}

main();