电影API：如何返回值？

Question

我正在使用电影数据库 API。我无法解决的问题是当我使用电影的 id 调用函数时返回“keys”变量。我是 JavaScript 新手，这就是为什么我无法解决这个问题。希望有人能帮助我。

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=[MY API KEY HERE]&page-1";     
getMovies(APIURL)
async function getMovies(url)
{
    const resp = await fetch(url);
    const respData = await resp.json();
    showMovies(respData.results)
}
        async function getTrailer(id)
    {
         const resp = await fetch(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=[MY API KEY HERE]&language=en-US`);
         const respDataa = await resp.json();
         let results = respDataa.results;
         let keys = results[0].key;
         return keys;
    }
    
    
    function showMovies(movies){
      movies.forEach(movie => {
           const modals = document.createElement('div');
         modals.classList.add('modal');
         modals.innerHTML = `  <a target="_blank" href ="https://www.youtube.com/watch?v=${getTrailer(movie.id)}">Watch Trailer</a>`

    }
}

Answer 1

首先，如果您将代码发布到某个地方，请始终隐藏您的 api 密钥（即使它是私有存储库，您也不应该这样做）。

其次，如果你想返回多个键，你可以映射结果以从每个键中提取 id 并执行返回：

async function getTrailer(id)
{
     const resp = await fetch(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=04c35731a5ee918f014970082a0088b1&language=en-US`);
     const respDataa = await resp.json();
     let results = respDataa.results;
     return results.map(({ key }) => key);
}

Answer 2

异步函数在 JavaScript 中返回一个 Promise。
只需在函数末尾添加

return keys

即可。

然后你可以这样做：

getTrailer(528085).then(data => {
 // do something with the data
})

您还可以处理错误：

getTrailer(528085)
  .then(data => {
    // do something with the data
   })
  .catch(err => {
    /* 
    An error occured. You can use err.toString() to convert the error into a string
    */
})

如果您想立即从异步函数（或 Promise）获取返回的数据，请将您的逻辑放入异步函数中，然后您可以简单地执行以下操作：

let keys = await getTrailer(528085)

并且，以下是如何处理 async/await 中的错误：

try {
  let keys = await getTrailer(528085)
}
catch(err){
    /* 
    An error occured. You can use err.toString() to convert the error into a string
    */
}

顺便说一句，就像 Desiigner 所说的那样，不要将 API 密钥保留在客户端中。任何人都可以看到您的 API 密钥。使用服务器将 API 响应返回给客户端。

Answer 3

我们必须等待或.然后返回（这是一个承诺）。

function showMovies(movies) {
      // make the forEach callback async
      movies.forEach(async (movie) => {
        console.log(getTrailer(movie.id)) // Promise {<pending>}
    
        const trailer = await getTrailer(movie.id);
        console.log({ trailer });
    
        const modals = document.createElement("div");
        modals.classList.add("modal");
        modals.innerHTML = `  <a target="_blank" href ="https://www.youtube.com/watch?v=${trailer}">Watch Trailer</a>`;
      });
    }