如何在其异步函数范围之外使用变量

Question

我需要在该作用域外使用我在异步函数内声明的变量。这可能吗？

movies.forEach((movie) => {
    const { title, poster_path, vote_average, overview, release_date, id } = movie

    async function getCredits(url) {
        const res = await fetch(url)
        const data = await res.json()

        const directors = [];
        
        const directorsName = directors.join(", ") // The one I want to bring out of its scope
    }

    const CREDITS_URL = `the credits url goes here and it uses this -> ${id}`
    getCredits(CREDITS_URL)

    const directorsName = directors.join(", ") // Like this

    const card = document.createElement("div")
    card.innerHTML = `
        <div class="director">
                <h3>Directed by ${directorsName}</h3> // This is where I need the variable
        </div>
    `
    cards.appendChild(card)
})

Answer 1

可以从您的 async 功能中 return 一些东西。您可以将 getCredits 函数移出循环，并使循环 async，类似于：

async function getCredits(url) {
  const res = await fetch(url)
  const data = await res.json()
  const directors = [];
  // Do something with data?
  
  return directors.join(", ");
}

movies.forEach(async (movie) => {
  const { id } = movie

  const CREDITS_URL = `the movie url goes here and it uses this -> ${id}`
  const response = await getCredits(CREDITS_URL);

  const card = document.createElement("div")
  card.innerHTML = `
      <div class="director">
              <h3>Directed by ${response}</h3> // This is where I need the variable
      </div>
  `
  cards.appendChild(card)
});

Answer 2

如果您希望更快地创建 DOM 并对董事姓名进行某种“延迟加载”，您可以这样做：

movies.forEach((movie) => {
  const { title, poster_path, vote_average, overview, release_date, id } = movie;

  const card = document.createElement('div');
  card.innerHTML = `<div class="director">
          <h3>Directed by <span class='dname'>...</span></h3>
        </div>`;
  const dname = card.querySelector('.dname');

  async function getCredits(url) {
    const res = await fetch(url);
    const data = await res.json();

    const directors = [];

    dname.textContent = directors.join(', ');
  }

  const CREDITS_URL = `the credits url goes here and it uses this -> ${id}`;
  getCredits(CREDITS_URL);

  cards.appendChild(card);
});

在这里，您正在创建 div 并立即附加它，但是 ... 用于董事姓名。但是您将该部分放在一个跨度中，然后在 getCredits 解析后设置跨度的 textContent。

*编辑：这还有一个额外的好处，即通过不使用 innerHTML.

插入它们来防止从导演的 return 注入 HTML

如何在其异步函数范围之外使用变量

How do I use the variable out of its asynchronous function scope

javascript

variables

scope

asynchronous