使用fetch调用API时返回Promise结果为undefined问题求助

问题根因 #

• 你的getMovieData函数没有显式返回fetch生成的Promise对象，函数执行结束默认返回undefined，所以外部无论怎么处理这个返回值都拿不到接口结果
• async函数内可以直接用await等待异步结果，不需要额外用Promise.resolve包装

修正后可运行代码 #

//search through TV Maze library
const form = document.querySelector("#searchForm");
form.addEventListener("submit", (e) => {
  e.preventDefault();
});

const printMovieData = async function () {
  const queryString = "suits";
  // 直接await getMovieData的返回结果
  const moviesImg = await getMovieData(queryString);
  console.log(moviesImg); // 此处可正常输出包含10部电影的数组
};

const getMovieData = function (query) {
  // 必须return fetch生成的Promise，外部才能拿到异步结果
  return fetch(`https://api.tvmaze.com/search/shows?q=${query}`)
    .then((res) => {
      return res.json();
    })
    .catch((error) => {
      console.log("请求出错：", error);
    });
};

printMovieData();

可选优化：全async/await写法可读性更高 #

const getMovieData = async function (query) {
  try {
    const res = await fetch(`https://api.tvmaze.com/search/shows?q=${query}`);
    return await res.json();
  } catch (error) {
    console.log("请求出错：", error);
  }
};

内容的提问来源于stack exchange，提问作者Samip