Почему при console.log выводится массив(подчеркнуто красным), а при return возвращается промис (подчеркнутно желтым)?

Question

[purplestrm]

Comments

[Дмитрий]

Главное ни в коем случае не выкладывать текст, а то вдруг люди захотят скопировать его и проверить, так ли это.

[purplestrm]

Дмитрий, async function getCompetence(url) {
let responseCompetence = await fetch(url);
let allCompetence = await responseCompetence.json();
console.log(allCompetence);
let numberOfComp = 0;
allCompetence.forEach((competence) => {
renderCompetence(competence, numberOfComp);
numberOfComp++
});

function renderCompetence(competence, numberOfComp) {
let optionCompetence = document.createElement('option');
optionCompetence.classList.add(`option-number-${numberOfComp}`);
optionCompetence.setAttribute('data-id', competence.id);
optionCompetence.setAttribute('value', competence.id);
optionCompetence.innerHTML = competence.name;
competenceSelect.appendChild(optionCompetence);
}

return allCompetence
}

[Дмитрий]

purplestrm, Да я уже ответил, это так, на будущее.

[purplestrm]

Дмитрий, А не подскажите как сделать так, чтобы функция возвращала все таки массив ? Или как нужно обработать промис, чтобы потом этот массив можно было занести в переменную

[Дмитрий]

purplestrm, Если вы вызываете эту функцию из другой асинхронной функции, то можете написать

await getCompetence(url)

в противном случае через then

getCompetence(url).then(res => {
  // здесь делаете с res что хотите
})

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

[purplestrm]

Дмитрий, Спасибо огромное!!

Answer 1

[Дмитрий]

Потому что функция async, если вы вызываете ее напрямую, без await, конечно она возвратит промис.