Escribí una función que cuando uso la palabra clave de retorno, solo obtengo el primer elemento de la lista devuelto en lugar de todos los elementos. El código funciona correctamente sin la palabra clave de retorno.
fragmento de código
function generateNames(){ for (let i = 0; i < 5; i++) { const playersName = fetch('https://www.balldontlie.io/api/v1/players?per_page=5') .then(response => response.json()) .then(json => console.log(json['data'][i]['first_name'])) // return playersName } } generateNames()El resultado que obtengo es;
Ike Ron Jabari MarShon Lorenzo pero cuando elimino el comentario, devuelvo la línea de código return playersName , solo obtengo el primer valor devuelto.
El resultado que obtengo es;
IkeDespués de refactorizar el código:
async function generateNames() { var playerList = []; const playersName = await fetch('https://www.balldontlie.io/api/v1/players?per_page=5') .then(response => response.json()) .then(json => { for (let i = 0; i < 5; i++) playerList.push(json['data'][i]['first_name']) }) // return playersName return playerList; } (async () => console.log(await generateNames()))()Creo que esto es lo que quieres:
async function fetchPlayerNames( count = 1 ) { let playersResponse = await fetch(`https://www.balldontlie.io/api/v1/players?per_page=${count}`) let players = await playersResponse.json() let desiredPlayers = players.data.slice(0, count) return desiredPlayers.map( player => player.first_name ) } (async function main() { let names = await fetchPlayerNames(5) console.log(names) })()Algunas notas:
Es más fácil trabajar con async/ .then que encadenar controladores .then, por lo que si su función se puede marcar como asíncrona (y algunas no), debe tener una fuerte preferencia para evitar cualquier .then o .catch dentro de esa función. Su refactor hace que la función sea asíncrona, pero continúa usando .then .
Su refactor no funcionará de todos modos, porque return playerList se ejecutará antes de que se ejecute cualquiera de las funciones .then . Como resultado, espero que su refactor devuelva una matriz vacía inmediatamente cada vez.
A pesar de que su refactor devuelve inmediatamente un conjunto de datos vacío, aún realiza la llamada a la API cinco veces . Eso es una tontería. La URL sugiere que la respuesta de la API puede incluir varios jugadores, por lo que su plan debería ser: (1) realizar una única solicitud que contenga todas las filas que desee y, a continuación, (2) extraer los elementos de esa lista que desee. Si no tiene cuidado de hacer llamadas de red adicionales, las personas que poseen la API pueden bloquear su aplicación en última instancia porque desperdicia recursos.
Evite codificar cosas como 5 . Eso es lo que se conoce como un " número mágico ". En su lugar, su función debe recibir el número deseado. El código de llamada obtendrá el número correcto de un archivo de configuración o entrada del usuario o algo más. Mi versión lo toma como un argumento, pero lo codifica en el sitio de la llamada porque realmente no hay un lugar mejor en una muestra de código tan pequeña.
Voy a criticar tu nombramiento. Nombrar importa. Su función no "genera" nombres, no crea ni inventa nombres al azar, pero eso es lo que implica la palabra en inglés "generar". Su función descarga nombres de Internet (cuyo verbo correcto es "buscar"). Si nombras mal tus funciones, tu aplicación se convertirá en un desastre.