Fetch 返回承诺

Question

我需要获取功能方面的帮助。 我有movie_genres_url 返回

const movie_genres_url = {
  "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
]
}

我有genresArray 用于过滤

const genresArray= [28, 18, 53];

作为回报，我得到了一个承诺 Promise {<pending>} 但我想要一个数组

['drama','action']

const fetchMovieGenres = async genresArray => {
  const response = await fetch(movie_genres_url);
  const json = await response.json();

  const genres = await json.genres
    .filter(genre => genresArray.includes(genre.id))
    .map(genre => genre.name);

  return genres;
};

Answer 1

async 函数将返回 Promise。因此，即使看起来您正在返回值，但最终会返回 Promise。

From the docs

异步函数总是返回一个承诺。如果异步函数的返回值不是显式的 Promise，它将被隐式包装在 Promise 中。

以下是fetch 和async-await 的示例。

const getData = async() => {
  let res = await fetch("https://reqres.in/api/users?page=2");
  let data = await res.json();
  return data;
}

getData()
  .then(r => { console.log(r) })
  .catch(e => { console.log(e) });

你的另一个要求是从响应中获取genresArray 的匹配元素的名称（即movie_genres_url）。你快到了，只是我们需要另一个Array.map 即.map(({ name }) => name) 来仅从过滤后的元素中获取名称。下面是例子。

const genresArray= [28, 18, 53];
const movie_genres_url = {"genres":[{"id":28,"name":"Action"},{"id":12,"name":"Adventure"}]}

const getMacthedElements = (data, filterBy) => data.filter(({ id }) => filterBy.includes(id)).map(({ name }) => name);

console.log(getMacthedElements(movie_genres_url.genres, genresArray));

另外，在使用Array.filter 的同时也不需要使用await。所以你的最终代码应该如下所示

const fetchMovieGenres = async genresArray => {
  const response = await fetch(movie_genres_url);
  const json = await response.json();

//Added `map(({ name }) => name)`
  const genres = json.genres.filter(({id}) => genresArray.includes(id)).map(({ name }) => name);
  return genres;
};

//While calling/using `fetchMovieGenres`, it can be something like below or 
//you can use `await` provided that this should be again wrapped in another `async` function.
fetchMovieGenres(genresArray).then(genres => { console.log(generes) }).catch(e => { console.log(e) });