Explication détaillée des exemples de traitement asynchrone dans l'applet WeChat (async/await)

J'ai fait à la fois Promise et co, mais finalement je n'ai pas pu m'empêcher de trouver la solution ultime pour ES7 : async/await.

async/await est également utilisé en conjonction avec Promise. Jetons d'abord un coup d'œil à l'exemple de code. Cette utilisation est très similaire à l'utilisation conjointe dont nous avons parlé précédemment :

function myAsyncFunc() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("myAsyncFunction done!");
      resolve({data: "Hello,World"});
    }, 5000);
  });
}

async function test() {
  var result = await myAsyncFunc();
  console.log(result.data); //Hello,World
}

test();

. À utiliser en petit Si async/await est utilisé dans le programme, il ne suffit pas de s'appuyer sur l'outil de conversion Babel dans les outils de développement Web WeChat, car des plug-ins Babel supplémentaires sont nécessaires pour compiler le code à l'aide de async/await . Cette fois, nous devons donc écrire notre propre script pour appeler Babel.

Dans le projet, nous devons d'abord désactiver l'option "Activer ES6 vers ES5", car nous devons maintenant le faire nous-mêmes.

Désactivez l'option

Ensuite, je vais utiliser Gulp pour écrire mon script et appeler Babel depuis Gulp pour compiler mon code. Bien sûr, vous pouvez également utiliser vos autres outils tels que Grunt, Webpack, etc. Vous pouvez vous référer ici pour apprendre à utiliser Babel dans l'outil de construction que vous utilisez.

Le point important est que lorsque nous appelons Babel, nous devons configurer les plug-ins pour que notre Babel prenne en charge async/await, tels que async-to-generator, async-generator-functions et d'autres plug-ins. . Pour plus de commodité, utilisez le préréglage directement (c'est-à-dire le package de plug-in officiellement configuré). L'un des deux préréglages, es2017 ou dernier, peut répondre à nos besoins.

Voici le fichier de configuration de Babel : .babelrc

{  
  "presets": [ "latest" ],  
  "plugins": []
}

Puis dans mon gulpfile.js, je vais compiler tous les fichiers js sous mon mini projet de programme via Babel :

gulp.task('scripts', () => {  
  return gulp.src('./src/**/*.js')    
    .pipe(babel())
    .pipe(gulp.dest('./dist'))
})

D'accord, c'est ce que nous devons faire pour compiler notre code. Parlons ensuite de quelques modifications à apporter au code du mini programme :

1 Présentez la bibliothèque de support du générateur

Le code traduit par Babel passera la fonction aysnc/await Il est implémenté. d'une manière similaire à la bibliothèque co, c'est-à-dire en utilisant un générateur. Par conséquent, tout comme lorsque nous utilisons co, nous devons nous appuyer sur un regeneratorRuntime pour prendre en charge la fonctionnalité du générateur. Nous pouvons utiliser la bibliothèque de régénération open source de Facebook. Vous pouvez télécharger cette bibliothèque de régénérateur via npm :

npm install regenerator

Retirez ensuite le fichier nommé regenerator-runtime.js dans le fichier téléchargé et placez-le dans notre code d'applet.

2. Importer le code

Introduisez la bibliothèque du régénérateur dans le fichier de code qui doit utiliser la fonctionnalité async/await :

const regeneratorRuntime = require('../../libs/regenerator-runtime')

Ensuite, vous pouvez être assuré que le code utilise async/await pour écrire un traitement asynchrone.

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!