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

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();

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.

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": []
}

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'))
})

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

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')

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!