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

我需要在异步函数中声明的变量超出该范围。可能吗

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)
})

movies.forEach（（movie）=>{
const{title，poster\u path，vote\u average，overview，release\u date，id}=movie
异步函数getCredits（url）{
const res=等待获取（url）
const data=await res.json（）
const directors=[]；
const directorsName=directors.join（“，”/）我想带出它的范围的那个
}
const CREDITS_URL=`这里是CREDITS URL，它使用这个->${id}`
getCredits（CREDITS_URL）
const directorsName=directors.join（“，”/），如下所示
const card=document.createElement（“div”）
card.innerHTML=`
由${directorsName}指导//这是我需要变量的地方
`
卡片。附加子对象（卡片）
})

可以从

异步

函数返回某些内容。您可以将

getCredits

函数移出循环，并使循环

异步

，类似于：

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)
});

异步函数getCredits（url）{ const res=等待获取（url） const data=await res.json（） const directors=[]； //对数据做些什么？ 返回董事。加入（“，”）； } movies.forEach（异步（电影）=>{ const{id}=movie const CREDITS_URL=`电影URL在这里，它使用这个->${id}` const response=wait getCredits（CREDITS\u URL）； const card=document.createElement（“div”） card.innerHTML=` 由${response}指导//这是我需要变量的地方 ` 卡片。附加子对象（卡片） });

---

如果您希望更快地创建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);
});

movies.forEach（（movie）=>{
const{title，poster\u path，vote\u average，overview，release\u date，id}=电影；
const card=document.createElement（'div'）；
card.innerHTML=`
导演。。。
`;
const dname=card.querySelector（'.dname'）；
异步函数getCredits（url）{
const res=等待获取（url）；
const data=wait res.json（）；
const directors=[]；
dname.textContent=directors.join（'，'）；
}
const CREDITS_URL=`这里是CREDITS URL，它使用这个->${id}`；
getCredits（CREDITS_URL）；
卡片。附属物（卡片）；
});

在这里，您正在创建div并立即将其追加，但带有一个

…

作为董事姓名。但您将该部分放在span中，然后设置span的textContent一次

getCredits

resolves

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

innerHTML

插入HTML，防止您的主管返回