Confus sur les promesses et async-attendre

Alors je vais faire des hypothèses ici, alors corrigez-moi si je me trompe et je vais les réparer. Espérons-le, ce faisant, je peux aider à clarifier votre compréhension.

Un moyen facile de penser à async / attendre code> remplace le besoin de .Chen (Callback) code>. Je préfère utiliser attendre code> si dans une fonction async code>. P> xxx pré>

Ce code n'est pas testé. Je n'ai pas utilisé l'API de GitHub, donc je devine mieux ce que chaque appel fait. Si gh.getrepo code> ou repo.getContents code> ne retourne pas de promesses, alors un ajustement serait nécessaire. P>

Dans l'événement, la bibliothèque GitHub que vous utilisez sera ne pas renvoyer une promesse si un rappel n'est pas fourni: p> xxx pré>

Voici un exemple utilisant ASYNC / attendre qui utilise une nouvelle promesse d'acquisitionner un rappel: P>

P>

  content:
  <div id="content"></div>
  
  result:
  <div id="result"></div>

Je pensais que ceci est le code révisé: xxx

Je ne sais toujours pas si c'est le moyen "droit" de le faire, mais ça marche. < / p>

Le mot clé code> ne peut être utilisé qu'avec une fonction async code>. Si vous remarquez que votre attend votre promesse.Tous (Promises.map (Promess => RetFiles.Push (promess))); Code> est à l'intérieur d'une fonction qui passe Fichiers code> param .Chen code>. Il suffit de faire cette fonction async code> et attendre code> fonctionnera dans la portée. Essayez le code ci-dessous.

 const getFiles = async function(token, reponame) {
  var gh = new GitHub({
    token: token
  });

  reponame = reponame.split("/");
  const repo = gh.getRepo(reponame[0], reponame[1]);

  let head = new Headers();
  head.append("Authorization: ", "token " + token);

  const getContents = new Promise((res, rej) => {
    repo.getContents(null, "content", true, (err, files) => {
      if (err) rej(err);
      else return files;
    }).then( async (files) => {
      let promises = [
        files.map(
          file =>
            new Promise(res => {
              fetch(file.downloadURL).then(body => {
                res(body.text);
              });
            })
        )
      ];

      const retFiles = [];
      await Promise.all(promises.map(promise => retFiles.push(promise)));
      res(retFiles)
    });
  });

  return getContents;
};

Il y a beaucoup de problèmes ici. Le code est très compliqué; Il n'y a pas besoin de toutes ces promesses et de ces couches d'indirection et de nidification pour atteindre ce dont vous avez besoin.

Le modèle que vous essayez de faire est très commun: p>

• Faites une demande d'obtenir une liste d'entités (fichiers, utilisateurs, URL ...). LI>
• Pour chaque entité renvoyée dans cette liste, faites une autre demande pour obtenir plus d'informations pour cela. Li>
• renvoie le résultat comme une promesse (il doit s'agir d'une promesse, car async code> Les fonctions ne peuvent renvoyer que des promesses). LI> ul>

  Le moyen de faire cela est de briser le problème en étapes. Utilisez le attendre code> et async code> Mots-clés au lieu de .Chen code> dans la plupart des cas. Pour rendre l'exemple reproductible, je vais utiliser un scénario sur lequel nous souhaitons obtenir des profils d'utilisateurs pour le plus récent Les gisières code> créés sur github - c'est fondamentalement équivalent à ce que vous faites et je ' ll laisse à vous d'extrapoler. p>

  La première étape consiste à obtenir la liste initiale d'entités (gisières récemment créées): p> xxx pré>

  Suivant, car Chaque gist dans notre éventail de gisières de 0..n code>, nous devons tirer une demande. Il est important de nous assurer que nous ne séralisons rien ici en utilisant attendre code>: p> xxx pré>

  maintenant que toutes les demandes sont en vol, nous devons attendre ils complètent. C'est là que promess.all code> est disponible: p> xxx pré>

  dernière étape consiste à obtenir le JSON de chaque réponse, ce qui nécessite une autre promesse . Tous CODE>: P>

  const getRecentGistCreators = async (n=1) => {
    try {
      const res = await fetch("https://api.github.com/gists/public");
      const gists = await res.json();
      const requests = gists.slice(0, n).map(gist =>
        fetch(`https://api.github.com/users/${gist.owner.login}`)
      );
      const responses = await Promise.all(requests);
      return await Promise.all(responses.map(e => e.json()));
    }
    catch (err) {
      throw err;
    }
  };
  
  (async () => {
    try {
      for (const user of await getRecentGistCreators(5)) {
        const elem = document.createElement("div");
        elem.textContent = user.name;
        document.body.appendChild(elem);
      }
    }
    catch (err) {
      throw err;
    }
  })();