Почему then возвращает функцию вместо ее ответа?

Никак не могу понять, как в 5 строчке возвращать в следующий then не iife функцию, а то, она возвращает. Какие есть способы решения этой проблемы? Заранее спасибо.

let getBestHeroPlayerRank = async () => {
    let heroid = prompt(`Full hero name to check?`, '74')
return await fetch(`https://api.opendota.com/api/rankings?hero_id=${heroid}`)
.then(ans => ans.json())
.then(ans => (async () => {await fetch(`https://api.opendota.com/api/players/${ans.rankings[0].account_id}`)}))
.then(ans => ans.json())
.then(bestHeroPlayerJSON => bestHeroPlayerJSON.leaderboard_rank)
.catch(err => console.log(err))
}

getBestHeroPlayerRank()


Ответы (1 шт):

Автор решения: Grundy

основная проблема в смешении async/await и then

.then(ans => ( 
    async () => { 
         await fetch(`https://api.opendota.com/api/players/${ans.rankings[0].account_id}`)
    }
))

Если отформатировать строку можно заметить, что возвращается именно функция.

Причем, даже если бы функция вызывалась - она вернула бы undefined, так как отсутствует return.

Для решения достаточно просто убрать async/await - здесь они не нужны и только запутывают.

let getBestHeroPlayerRank = async() => {
  let heroid = prompt(`Full hero name to check?`, '74')
  return await fetch(`https://api.opendota.com/api/rankings?hero_id=${heroid}`)
    .then(ans => ans.json())
    .then(ans => fetch(`https://api.opendota.com/api/players/${ans.rankings[0].account_id}`))
    .then(ans => ans.json())
    .then(bestHeroPlayerJSON => bestHeroPlayerJSON.leaderboard_rank)
    .catch(err => console.log(err))
}

getBestHeroPlayerRank().then(console.log)

→ Ссылка