Detaillierte Erläuterung von Beispielen für die asynchrone Verarbeitung im WeChat-Applet (async/await)

Y2J
Freigeben: 2017-04-28 12:00:41
Original
6260 Leute haben es durchsucht

Ich habe sowohl Promise als auch Co. durchgeführt, aber schließlich konnte ich nicht anders, als die ultimative Lösung für ES7 zu finden: async/await.

async/await wird auch in Verbindung mit Promise verwendet. Schauen wir uns zunächst den Beispielcode an. Diese Verwendung ist der zuvor besprochenen gemeinsamen Verwendung sehr ähnlich:

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();
Nach dem Login kopieren

Zur Verwendung in kleinen Mengen Wenn async/await im Programm verwendet wird, reicht es nicht aus, sich auf das Babel-Konvertierungstool in den WeChat-Webentwicklertools zu verlassen, da einige zusätzliche Babel-Plug-Ins erforderlich sind, um den Code mit async/await zu kompilieren . Dieses Mal müssen wir also unser eigenes Skript schreiben, um Babel aufzurufen.

Im Projekt müssen wir zunächst die Option „ES6 auf ES5 einschalten“ deaktivieren, da wir dies nun selbst tun müssen.

Detaillierte Erläuterung von Beispielen für die asynchrone Verarbeitung im WeChat-Applet (async/await)

Deaktivieren Sie die Option

Dann werde ich Gulp verwenden, um mein Skript zu schreiben, und Babel von Gulp aus aufrufen, um meinen Code zu kompilieren. Natürlich können Sie auch Ihre anderen Tools wie Grunt, Webpack usw. verwenden. Hier erfahren Sie, wie Sie Babel in dem von Ihnen verwendeten Build-Tool verwenden.

Der wichtige Punkt ist, dass wir beim Aufrufen von Babel Plug-Ins für unser Babel konfigurieren müssen, um Async/Await zu unterstützen, wie z. B. Async-to-Generator, Async-Generator-Funktionen und andere Plug-Ins . Verwenden Sie der Einfachheit halber direkt die Voreinstellung (dh das offiziell konfigurierte Plug-In-Paket). Eine der beiden Voreinstellungen, es2017 oder die neueste, kann unseren Anforderungen entsprechen.

Dies ist Babels Konfigurationsdatei: .babelrc

{  
  "presets": [ "latest" ],  
  "plugins": []
}
Nach dem Login kopieren

Dann werde ich in meiner gulpfile.js alle js-Dateien unter meinem Miniprogrammprojekt über Babel kompilieren:

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

Okay, das müssen wir tun, um unseren Code zu kompilieren. Lassen Sie uns als Nächstes über einige Änderungen sprechen, die am Mini-Programmcode vorgenommen werden müssen:

1. Stellen Sie die Generator-Unterstützungsbibliothek vor.

Der von Babel übersetzte Code übergibt die aysnc/await-Funktion. Es ist implementiert Auf ähnliche Weise wie bei der Co-Bibliothek, d. h. unter Verwendung eines Generators. Daher müssen wir uns, genau wie bei der Verwendung von Co, auf eine regeneratorRuntime verlassen, um die Generatorfunktion zu unterstützen. Wir können die Open-Source-Regenerator-Bibliothek von Facebook verwenden. Sie können diese Regenerator-Bibliothek über npm herunterladen:

npm install regenerator
Nach dem Login kopieren

Nehmen Sie dann die Datei mit dem Namen regenerator-runtime.js aus der heruntergeladenen Datei heraus und fügen Sie sie in unseren Applet-Code ein.

2. Code importieren

Fügen Sie die Regeneratorbibliothek in die Codedatei ein, die die Async/Warten-Funktion verwenden muss:

const regeneratorRuntime = require('../../libs/regenerator-runtime')
Nach dem Login kopieren

Dann können Sie beruhigt sein Code verwendet async/await, um die asynchrone Verarbeitung zu schreiben.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für die asynchrone Verarbeitung im WeChat-Applet (async/await). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!