Как я могу получить реальное возвращаемое значение из цепочки обещаний?

Question

Я пытаюсь использовать функцию для подсчета просмотров видео с помощью API YouTube. Хотя я вижу количество просмотров через консольный журнал, на странице HTML я получаю 'undefined'

Я пробовал метод .toString (), но безрезультатно

let views = document.createElement('p');
views.innerHTML = '<i class="fas fa-eye"></i>' + getViews(video);

...

const getViews = (video) => {
    const url = 'https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics&id=' + video.id + '&key=' + api;
    // console.log(url);
    fetch(url).then((response) => {
        return response.json();
    }).then((data) => {
        console.log(data.items[0].statistics.viewCount); // it works here
        return data.items[0].statistics.viewCount; // but not here 
    }).catch((error) => {
        console.log(error);
    })
};

Я ожидаю, что функция getViews вернет строку, содержащую количество просмотров для видео, переданного как параметр функции

Answer 1

views.innerHTML = '<i class="fas fa-eye"></i>' + getViews(video);

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

const getViews = (video) => {
    const url = 'https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics&id=' + video.id + '&key=' + api;
    return fetch(url).then((response) => { // <--- added return
        return response.json();
    }).then((data) => {
        console.log(data.items[0].statistics.viewCount);
        return data.items[0].statistics.viewCount;
    }).catch((error) => {
        console.log(error);
    })
};

getViews(video)
  .then(viewCount => {
    // Moved the code into the .then
    let views = document.createElement('p');
    views.innerHTML = '<i class="fas fa-eye"></i>' + viewCount;
  });

Answer 2

return the fetch:

return fetch(url).then(...).then(...).catch(...);