JavaScript. Como hago una función asincrona que solamente se encargue de llamar a la API?

Question

Necesito hacer una función asíncrona que solamente sea la encargada de llamar a la API. De ésta función necesito tomar los valores para usar en otra parte del código. Lo grafíco para que lo entiendan:

Esta es mi funcion:

async function live() {

    const res = await fetch(`https://api-football-v1.p.rapidapi.com/v2/fixtures/live`, {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "api-football-v1.p.rapidapi.com",
            "x-rapidapi-key": `mi key`
        }
    });
    const data = await res.json();
    let liveMatches = data.api;
}

Si yo paso como parámetro liveMatches asi: async function live(liveMatches) y despues hago console.log(live(liveMatches)) me devuelve esto:

Es decir, la Promise indefinida.

Entonces en principio necesito que me devuelva la respuesta de la api.

Una vez tenga la respuesta de la API, puedo usar la variable liveMatches en otra parte del código fuera de esa funcion? Llamando la función con el parámetro? es decir, hacer algo como esto es válido?:

function test(){
   live(liveMatches);
   console.log(live(liveMatches));
}

O tendría que a test() pasarle como parámetro live(liveMatches)) ?

hay un problema con tu criterio: realizar algo asyncrono y luego utilizar la data en otra parte: entonces necesitas usar promise. — ArcanisGK507, Aug 21 '20 at 15:13

score 3 · Accepted Answer · answered Aug 21 '20 at 15:19

Primero debes entender cómo funcionan las Promesas. Una vez entiendes el concepto, verás que async/ awaitno es más que azúcar sintáctico. Te recomiendo ver esta pregunta y sus respuestas.

Si quieres ver otro ejemplo, aquí tienes otra pregunta/respuesta que considero interesante, porque se ve el equivalente entre promesas y async/await

Entonces, lo que puedes hacer es lo siguiente:

async function live() {
    const res = await fetch(`https://api-football-v1.p.rapidapi.com/v2/fixtures/live`, {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "api-football-v1.p.rapidapi.com",
            "x-rapidapi-key": `mi key`
        }
    });
    const data = await res.json();
    return data.api;
}

let liveMatches = live(); //tienes una promesa
liveMatches.then(response => {
  console.log(response);
}

score 1 · Answer 2 · answered Aug 21 '20 at 15:18

Usando Promise, deberías poder tener la escalabilidad que indicas, debes adaptarla a tu necesidad:

var AsyncData;
let promise = new Promise(function(resolve, reject) {
  /* Codigo ajax Asincrono */
  /* Guardar en AsyncData */
  setTimeout(() => resolve(1), 1000);
});

promise.then(function(result) {
  /* Manipular AsyncData */
  alert(result); // 1
  return result * 2;
});

Documentación #1

Documentación #2

JavaScript. Como hago una función asincrona que solamente se encargue de llamar a la API?

2 Answers2