API asynchrones utilisant l'API Fetch et les générateurs ES6

Points de base

• ECMAScript 6 (ES6) prend mieux en charge la programmation asynchrone via la promesse et le générateur, et a introduit l'API Fetch, conçue pour remplacer XMLHTTPRequest comme base pour communiquer avec les ressources distantes.
La méthode de l'API
• Fetch renvoie des objets ES6 Promise qui peuvent être utilisés avec le générateur pour former la base d'opérations asynchrones complexes, telles qu'une série d'opérations, où chaque opération dépend de la valeur renvoyée par l'opération précédente.
• Le générateur peut être utilisé avec l'API Fetch pour effectuer des tâches telles que le sondage long, où le client envoie constamment des demandes au serveur jusqu'à ce qu'il obtienne une réponse. Cela se fait en produisant une réponse avant qu'il ne contienne des données.
• API Fetch et le générateur ES6 peut également être utilisé pour implémenter plusieurs dépendances des appels asynchrones, où chaque opération suivante dépend de la valeur renvoyée par l'opération précédente. Cela peut être fait en les mettant dans une fonction de générateur et en l'exécutant si nécessaire.

ECMAScript 6 (AKA ECMAScript 2015 ou ES6) apporte de nombreuses nouvelles fonctionnalités à JavaScript, ce qui le rend idéal pour les grandes applications. Une fonctionnalité est qu'il prend mieux en charge la programmation asynchrone à l'aide de promesse et de générateur. Un autre est l'ajout de l'API Fetch, conçu pour remplacer XMLHTTPRequest comme base pour communiquer avec les ressources distantes.

La méthode API Fetch renvoie des objets promesses ES6 qui peuvent être utilisés en conjonction avec le générateur pour former la base des opérations asynchrones complexes. Cela peut être quelque chose d'une série d'opérations asynchrones (chacune dépend de la valeur renvoyée par l'opération précédente) à une opération qui doit être publiée à plusieurs reprises aux appels asynchrones vers le serveur pour obtenir la dernière mise à jour.

Dans cet article, nous apprendrons à utiliser l'API Fetch avec un générateur pour construire une API asynchrone. L'API Fetch est actuellement prise en charge par Chrome, Opera, Firefox et Android Browsers. Pour les navigateurs non pris en charge, nous fournissons un polyfill de GitHub.

Comme d'habitude, le code de cet article peut être trouvé dans notre référentiel GitHub, avec une démonstration de la technique finale au bas de l'article.

Utilisez le générateur pour le fonctionnement asynchrone

CONSEIL: Si vous devez consulter le contenu du générateur et son fonctionnement, veuillez consulter: ECMAScript 2015: Générateur et iterator

Alors, comment effectuer des opérations asynchrones à l'aide du générateur? Eh bien, si nous analysons le fonctionnement du générateur, nous trouverons la réponse.

La fonction du générateur qui implémente l'itérateur a la structure suivante:

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

yield Le mot-clé est responsable du renvoi du résultat et de la pause de l'exécution de la fonction Iterator jusqu'à la prochaine fois qu'elle sera appelée. Il préserve également l'état de la fonction au lieu de relancer tout la prochaine fois qu'il s'appelle, se souvenant efficacement de sa dernière gauche.

Nous pouvons reconstituer la fonction ci-dessus comme une forme sans boucle while:

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

Dans les deux cas ci-dessus, la fonction se comporte de la même manière. La seule raison d'utiliser le mot-clé yield est de suspendre l'exécution de la fonction jusqu'à la prochaine itération (qui semble un peu asynchrone). Étant donné que l'instruction yield peut renvoyer n'importe quelle valeur, nous pouvons également renvoyer une promesse et faire en sorte que la fonction exécute plusieurs appels asynchrones.

Utilisez un générateur avec API Fetch

CONSEIL: Pour examen de l'API Fetch, veuillez consulter: Introduction à API Fetch

Comme mentionné précédemment, l'API Fetch est conçu pour remplacer XMLHTTPREQUEST. Cette nouvelle API fournit un contrôle sur les différentes parties des demandes HTTP et renvoie une promesse qui est analysée ou rejetée en fonction de la réponse du serveur.

Bondage long

L'un des cas d'utilisation où l'API et le générateur Fetch peuvent être utilisés ensemble est un sondage long. Le sondage long est une technique dans laquelle un client envoie constamment des demandes au serveur jusqu'à ce qu'une réponse soit obtenue. Dans ce cas, vous pouvez utiliser un générateur pour produire en continu la réponse jusqu'à ce que la réponse contient des données.

Pour simuler des sondages longs, j'ai inclus une API Express REST dans l'exemple de code qui répond aux informations météorologiques en temps réel de la ville après cinq tentatives. Voici l'API REST:

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

Maintenant, écrivons une fonction de générateur qui appelle cette API plusieurs fois et renvoie une promesse sur chaque itération. Sur le client, nous ne savons pas combien d'itérations nous obtiendrons des données du serveur. Ainsi, cette méthode aura une boucle infinie, chaque itération pingre le serveur et renvoie une promesse sur chaque itération. Ce qui suit est la mise en œuvre de cette méthode:

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

Nous avons besoin d'une fonction pour appeler en permanence cette fonction et vérifier si la valeur existe après les analyses de promesse. Ce sera une fonction récursive qui appelle la prochaine itération du générateur et n'arrêtera le processus que si la valeur renvoyée du générateur est trouvée. L'extrait de code suivant montre l'implémentation de cette méthode et les instructions qui appellent cette méthode:

function *pollForWeatherInfo(){
  while(true){
    yield fetch('/api/currentWeather',{
      method: 'get'
    }).then(function(d){
      var json = d.json();
      return json;
    });
  }
}

Comme nous le voyons ici, le premier appel à la fonction runPolling crée l'objet générateur. La méthode next renvoie un objet avec l'attribut value, qui dans notre cas contient la promesse renvoyée par la méthode fetch. Lorsque cette promesse analyse, elle contiendra un objet vide (retourner si la variable polls est inférieure à 5), ou un autre objet contenant les informations requises.

Ensuite, nous vérifions la propriété temperature de cet objet (cela indiquera le succès). S'il n'existe pas, nous transmettons l'objet générateur à l'appel de fonction suivant (pour éviter de perdre l'état du générateur), ou nous imprimons la valeur de l'objet à la console.

Pour voir comment cela fonctionne, obtenez le code de notre référentiel, installez les dépendances, démarrez le serveur et accédez à https://www.php.cn/link/494ad0d24e15c7da81c7ea265c7f4cb4 voir le shell suivant Résultats:

0 vrai Envoi ... vide 1 vrai Envoi ... vide 2 vrai Envoi ... vide 3 vrai Envoi ... vide 4 vrai Envoi ... vide 5 faux Envoi ... objet

et l'objet lui-même imprimé sur la console du navigateur.

appels asynchrones de plusieurs dépendances

Habituellement, nous devons implémenter plusieurs appels asynchrones de dépendance, où chaque fonctionnement asynchrone ultérieur dépend de la valeur renvoyée par l'opération asynchrone précédente. Si nous avons un ensemble de telles opérations et qu'ils doivent être appelés plusieurs fois, nous pouvons les mettre dans une fonction de générateur et l'exécuter si nécessaire.

Pour démontrer cela, j'utiliserai l'API de GitHub. Cette API nous donne accès aux informations de base sur les utilisateurs, les organisations et les référentiels. Nous utiliserons cette API pour obtenir une liste de contributeurs au référentiel aléatoire de l'organisation et afficher les données récupérées à l'écran.

Pour ce faire, nous devons appeler trois points de terminaison différents. Voici les tâches qui doivent être effectuées:

• Obtenez des détails sur l'organisation
• Si l'organisation existe, obtenez le référentiel de l'organisation
• obtenir des contributeurs à l'un des référentiels de l'organisation (sélectionné au hasard)

Créons une fonction de wrapper autour de l'API Fetch pour éviter une écriture répétée du code pour créer des en-têtes et construire des objets de demande.

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

La fonction suivante utilise la fonction ci-dessus et produit une promesse sur chaque appel:

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

Maintenant, écrivons un morceau de logique pour appeler la fonction ci-dessus pour obtenir le générateur, puis remplir l'interface utilisateur avec les valeurs obtenues à partir du serveur. Étant donné que chaque appel à la méthode next du générateur renvoie une promesse, nous devrons relier ces promesses. Ce qui suit est le cadre de code pour le générateur renvoyé à l'aide de la fonction ci-dessus:

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

(La partie de démonstration est omise ici car le codepen ne peut pas être rendu dans Markdown)

Conclusion

Dans cet article, j'ai démontré comment utiliser l'API Fetch avec un générateur pour construire une API asynchrone. Ecmascript 6 apportera beaucoup de nouvelles fonctionnalités à la langue, trouver des moyens créatifs de les combiner et tirer parti de leur pouvoir conduit souvent à d'excellents résultats. Mais que pensez-vous? Est-ce une technologie que nous pouvons commencer à utiliser immédiatement dans notre application? J'aimerais entendre vos pensées dans les commentaires.

(La partie FAQ est omise ici car le contenu est fortement dupliqué à partir des informations précédentes)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!