javascript - 如何更改点击链接以匹配我从另一个 API 请求获得的 ID

Question

我可能在标题中表达得不好，所以这里是:
我想更改 IMDB 按钮的链接地址，以便将电视节目 ID 添加到 URL，因此它看起来像这样 ( https://www.imdb.com/title/tt2861424 )。

我对 API(themoviedb API)有 2 个单独的请求，一个是显示电视节目的详细信息(其中一些大脑没有包含 imdb_id)，另一个是来自同一 API 提供商的获取 external_ids 的请求(以及这样就能得到imdb_id)。但我无法连接第二个请求中的 imdb_id，将其放在 IMDB 按钮上，因此它会将 imdb_id 添加到 URL 并打开相应的页面。

另外，它可以工作，我可以在第二个请求上获取 imdb_id，但我必须将其输出到我已有的所有结构下，这会破坏整个结构。

function getShowInfo(){
    let showId = sessionStorage.getItem("showId");

    axios.get("https://api.themoviedb.org/3/tv/"+showId+'?api_key=fa155f635119344d33fcb84fb807649b&language=en-US')
        .then((response)=>{
            let series = response.data;
            let output = `
                <div class="moviePage">
                    <div class="poster"><img src="http://image.tmdb.org/t/p/w300/${series.poster_path}"></div>
                    <div class="info">
                        <h2>${series.name}</h2>
                        <ul>
                            <li><strong>Genres:</strong> ${series.genres[0].name}</li>
                            <li><strong>Episode runtime:</strong> ${series.episode_run_time[0]}min </li>
                            <li><strong>Frist air date:</strong> ${series.first_air_date}</li>
                            <li><strong>Networks:</strong> ${series.networks[0].name}</li>
                            <li><strong>Popularity:</strong> ${series.popularity} %</li>
                            <li><strong>Number of episodes:</strong> ${series.number_of_episodes}</li>
                            <li><strong>Number of seasons:</strong> ${series.number_of_seasons}</li>
                            <li><strong>Production companies:</strong> ${series.production_companies[0].name},${series.production_companies[1].name}</li>
                            <li><strong>Status:</strong> ${series.status}</li>
                            <li><strong>Type: </strong>${series.type}</li>
                        </ul>

                        <div class="buttons"> ERROR
                            <a href="https://www.imdb.com/title/???"target="_blank"> IMDB Link </a>
                            <a href="#" onclick="openTrailer()"> Trailer </a>
                            <a href="https://www.titlovi.com/titlovi/?prijevod=${series.name}" target="_blank"> Subtitle </a>
                            <a href="https://www.thepiratebay.org/search/${series.name}" target="_blank"> Pirate bay </a>
                            <a href="javascript:history.back()"> Go back </a>
                        </div>
                    </div>
                </div>
                <div class="plot">
                    <h3>Plot: </h3>
                    <p>${series.overview}</p>
                </div>
            `;
            let info = document.getElementById("movie");
            info.innerHTML = output;
        })
        .catch ((err)=>{
            console.log(err);
        });
        axios.get("https://api.themoviedb.org/3/tv/"+showId+'/external_ids?api_key=fa155f635119344d33fcb84fb807649b&language=en-US')
            .then((response)=>{
                console.log(response)
                let imdb = response.data.imdb_id;
                console.log(imdb);
            })
}

Answer 1

使用Promise.all仅在两个响应返回后创建HTML，以便您可以使用imdb_id和该系列立即信息:

function getShowInfo() {
  const showId = sessionStorage.getItem("showId");

  const seriesProm = axios.get("https://api.themoviedb.org/3/tv/" + showId + '?api_key=fa155f635119344d33fcb84fb807649b&language=en-US');
  const imdbProm = axios.get("https://api.themoviedb.org/3/tv/" + showId + '/external_ids?api_key=fa155f635119344d33fcb84fb807649b&language=en-US');
  Promse.all([seriesProm, imdbProm])
    .then(([seriesResp, imdbResp]) => {
      const series = seriesResp.data;
      const imdb_id = imdbResp.data.imdb_id;
      let output = `
        <div class="moviePage">
        <div class="poster"><img src="http://image.tmdb.org/t/p/w300/${series.poster_path}"></div>
        ...
        <a href="https://www.imdb.com/title/${imdb_id}" target="_blank"> IMDB Link </a>
        ...