Не удается обработать извлеченные данные с сервера

Question

Я пытаюсь получить данные с этим кодом:

export const genres =()=>{
const apiUrl = "http://localhost:3000/api";
fetch(apiUrl + "/genres")
  .then(response => response.json())
  .then(data => {
    const res = data.results
    return res
  }) 
} 

, затем я хочу использовать результат с этим кодом

export function getGenres() {
  return genres.filter(g => g);
}

, но я получаю это: TypeError: genres.filter не является функцией .

в чем моя ошибка и как ее исправить?

Спасибо

Answer 1

Во-первых, жанры - это не массив, а функция, поэтому фильтр не будет определен для него

Во-вторых, , жанры в настоящее время ничего не возвращают

В-третьих , жанры - это асинхронный метод, поэтому вам нужно обрабатывать обещания. Вы можете использовать асинхронное ожидание для него

export const genres =()=>{
    const apiUrl = "http://localhost:3000/api";

    return fetch(apiUrl + "/genres")
      .then(response => response.json())
      .then(data => {
        const res = data.results
        return res
      }) 

}

export async function getGenres() {
  try {
     const res = await genres();
     return res.filter(g => g);
  } catch(e) {
     console.log('err', e);
  }
}

Answer 2

genres - это функция, поэтому вы не можете напрямую использовать filter.

Вместо этого вы можете вызвать функцию genres, вернуть обещание fetch и дождаться егорешить, прежде чем вы можете что-либо сделать с res.

export const genres = () => {
  const apiUrl = "http://localhost:3000/api";

  return fetch(apiUrl + "/genres")
    .then(response => response.json())
    .then(data => {
      const res = data.results;
      return res;
    });
};

export function getGenres() {
  return genres().then(res => res.filter(g => g));
}