Reactjs - Méthode renvoie le résultat avant que l'appel d'API obtienne les données. (Toujours objet vide)

Question

Dans mon code simplifié:

static getData(Id) { 
    const data = []; 
    api.getData(lId) 
    .then((Res) => { 
     data.push(Res); 
    }); 
    return data; 
} 

Le critère d'évaluation de l'API récupère les données, mais il prend un certain temps. la méthode retourne toujours [], mais si je mets un console.log (Res), les données sont là. Cela signifie que la méthode renvoie le const data = []; initial et n'attend pas que l'API renvoie les données.

Comment est-ce que je devrais résoudre ce problème?

Regrds

Answer 1

Il y a un problème avec votre calendrier ici:

static getData(Id) { 
    const data = []; 
    api.getData(lId) 
    .then((Res) => { 
     data.push(Res); 
    }); 
    return data; <-- Gets returned before the promise resolves/rejects 
} 

Si vous devez faire un traitement supplémentaire sur vos données avant qu'il soit retourné à l'appelant - dans votre exemple, vous le mettez dans un tableau - vous allez besoin d'envelopper avec une autre promesse:

static getData(Id) { 
    return new Promise((resolve, reject) => { 
     api 
     .getData(Id) 
     .then((Res) => { 
      const data = [] 
      data.push(Res); 
      resolve(data) 
     }) 
     .catch(reject) 
    }) 
} 

Answer 2

Vous devez utiliser Promise.

Par exemple:

static getData(Id) { 
    return new Promise((resolve) => { 
    api.getData(Id) 
     .then((Res) => { 
     resolve(Res); 
     }); 
    }); 
} 

Et utiliser cette méthode comme ceci:

getData(15) 
    .then((data) => { 
    console.log(data); 
    });