WeChatアプレットの非同期処理例（async/await）を詳しく解説

私は Promise と co の両方を実行しましたが、最終的には ES7 の究極の解決策である async/await を思いつかずにはいられませんでした。

async/await は Promise と組み合わせて使用​​することもできます。まず、この使用法は前に説明した co の使用法と非常によく似ています。小さなプログラム、WeChat に依存する async/await を使用するコードをコンパイルするには追加の Babel プラグインが必要となるため、Web 開発者ツールの Babel 変換ツールではもはや十分ではありません。そこで今回は、Babel を呼び出す独自のスクリプトを作成する必要があります。

プロジェクトでは、まず「ES6 から ES5 までをオンにする」オプションをオフにする必要があります。これは自分で行う必要があるためです。

オプションをオフにしてください

次に、Gulp を使用してスクリプトを作成し、Gulp から Babel を呼び出してコードをコンパイルします。もちろん、Grunt、Webpack などの他のツールを使用することもできます。使用するビルド ツールで Babel を使用する方法については、ここを参照してください。重要な点は、Babel を呼び出すときに、async-to-generator、async-generator-functions、その他のプラグインなど、async/await をサポートするように Babel のプラグインを構成する必要があるということです。便宜上、プリセットを直接使用します (つまり、公式に構成されたプラグイン パッケージ)。es2017 または最新の 2 つのプリセットのうちの 1 つがニーズを満たすことができます。

これは Babel の設定ファイルです: .babelrc

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

次に、私の gulpfile.js で、Babel を介してミニ プログラム プロジェクトの下にあるすべての js ファイルをコンパイルします:

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

さて、これが私たちです コードをコンパイルするのに必要な作業です。次に、ミニ プログラム コードに加えられるいくつかの変更について説明します。

1. ジェネレーター サポート ライブラリを導入します

Babel によって変換されたコードは、co ライブラリと同様の方法で aysnc/await 関数を実装します。つまり、ジェネレーターが使用されるため、co を使用する場合と同様に、ジェネレーター機能をサポートするために regeneratorRuntime に依存する必要があります。 Facebook のオープンソースの再生ライブラリを使用できます。この再生成ライブラリは、npm を通じてダウンロードできます:

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

次に、ダウンロードしたファイルから regenerator-runtime.js という名前のファイルを取り出し、アプレット コードに組み込みます。

2. コードの導入

async/await 機能を使用する必要があるコード ファイルにリジェネレーター ライブラリを導入します。

npm install regenerator

これで、async/await を安全に使用してコードに非同期処理を記述することができます。

以上がWeChatアプレットの非同期処理例（async/await）を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。