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));

此外，在使用await时无需使用Array.filter。因此，您的最终代码应类似于以下内容

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) });

取得回报承诺

1 个答案: