无法从 tmdb javaScript 获取数据

Question

我正在尝试仅使用 tmdb api、JavaScript、css 和 html 构建一个电影网站。我尝试执行搜索查询并显示结果，但问题是结果不显示。调试时，收到的状态码是

200

，但是当

res.json()

返回时，它只是结束获取函数，而不是继续获取数据。我将非常感谢您的帮助。

谢谢你。

我的网址

const BASE_URL = "https://api.themoviedb.org/3/";
const API_KEY = "api_key=9b62c3eb4a6bc8acd4e26602f16fa744";
let SEARCH_URL = BASE_URL + "search/movie?" + API_KEY + "&sort_by=popularity.desc&query=";

我的搜索功能：

function searchMovie() {
    let f = document.getElementById('search_movie');
    f.addEventListener('submit', () => {
        let user_input = search_input.value;
        if (user_input && user_input.trim() != '') {
            let query = SEARCH_URL + user_input;
            console.log();
            getMovies(query);
        }
    });
}

我的获取功能：

function getMovies(my_api) {
    main.innerHTML = '';
    fetch(my_api, {
        method: 'GET',
        cache: "no-cache",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" }
    }).then(res => res.json()).then(data => {
        let arr = data.results;
        if (arr && arr.length > 0) {
            arr.forEach(movie => {
                addMovie(movie);
            });
        }
        else {
            getMovies(MOVIE_URL, DEFAULT_PAGE);
            console.log("Can't find results");
        }
    }).catch(err => {
        console.log(err.message);
    });
}

Answer 1

你大部分时间都在那里。 fetch 调用返回一个承诺，因此您不应该将

innerHTML

设置为该承诺。相反，使用 Promise 等待获取完成，然后用结果更新 dom。

我还建议将请求和 dom 操作分开，就像我在下面所做的那样。它有效...

const BASE_URL = "https://api.themoviedb.org/3/";
const API_KEY = "api_key=9b62c3eb4a6bc8acd4e26602f16fa744";
let SEARCH_URL = BASE_URL + "search/movie?" + API_KEY + "&sort_by=popularity.desc&query=";

function getMovies(my_api) {
  return fetch(my_api, {
      method: 'GET',
      cache: "no-cache",
    })
    .then(res => res.json())
    .catch(err => {
      console.log(err.message);
    });
}

function renderMovies(res) {
  let ul = document.getElementById('results');
  ul.innerHTML = '';
  res.results.forEach(result => {
    let li = document.createElement('li');
    li.appendChild(document.createTextNode(result.title));
    ul.appendChild(li);
  });
}

let f = document.getElementById('search_movie');
f.addEventListener('click', () => {
  let user_input = search_input.value;
  if (user_input && user_input.trim() != '') {
    let query = SEARCH_URL + user_input;
    getMovies(query).then(renderMovies)
  }
});

<input id="search_input"></input><br/>
<button id="search_movie">SEARCH</button><br/>
<ul id="results"></ul>

Answer 2

即使我几天来也遇到同样的问题，我认为问题出在网站端，它不起作用。它说无法在我的项目中获取，但是当我尝试打开该网站时，该网站也没有加载。如果你们中有人知道如何解决这个问题，请告诉我。