WeChatアプレットにおけるPromiseによる非同期処理処理の実装手順

この記事では主に、WeChat ミニプログラムでの非同期処理処理のための Promise の使用に関する関連情報を紹介します。ここでは、Promise を使用して非同期処理を処理する方法について詳しく説明し、必要な友人は参考にしてください。

WeChatミニプログラムの非同期処理処理にPromiseを使用した例を詳しく解説

JavaScriptは単一プロセスで実行され、同期操作によりプログラムの実行がブロックされることがわかっています。たとえば、ブラウザ ページ プログラムでは、同期されたコードの実行に長い時間がかかる場合 (大規模なループ操作など)、ページがスタックします。

そのため、JavaScript では、プログラムのパフォーマンスとエクスペリエンスを向上させるために、いくつかの非同期機能が提供されています。たとえば、コードを setTimeout() で実行したり、Web ページで Ajax を使用してサーバーにデータを送信したりできます。 . 非同期データリクエストを実行します。これらの非同期コードは現在のインターフェイスのメイン プロセスをブロックせず、インターフェイスは非同期コードの実行が完了した後に引き続き柔軟に動作します。

典型的な非同期コードは次のようになります:

function asyncFunc(callback) {
 setTimeout(function () {
  //在这里写你的逻辑代码
  //...

  //逻辑代码结束，执行一个回调函数
  callback();
 }, 5000);
}

または:

function getAccountInfo(callback, errorCallback) {
 wx.request({
  url: '/accounts/12345',
  success: function (res) {
   //...
   callback(data);
  },
  fail: function (res) {
   //...
   errorCallback(data);
  }
 });
}

次に、それを次のように呼び出します:

asyncFunc(function () {
 console.log("asyncFunc() run complete");
});

getAccountInfo(function (data) {
 console.log("get account info successfully:", data);
}, function () {
 console.error("get account info failed");
});

これは、コールバック関数を使用してコード実行フローを制御する方法です。これは分かりやすくて良いようです。

ただし、コード内に非同期操作が多すぎて、これらの非同期操作が順番に実行されるようにする必要がある場合、コードは次のように非常に悪くなります:

asyncFunc1(function(){
 //...
 asyncFunc2(function(){
  //...
  asyncFunc3(function(){
   //...
   asyncFunc4(function(){
    //...
    asyncFunc5(function(){
      //...
    });   });
  });
 });
});

このようなコードの可読性と保守性想像することができます。また、コールバック関数の本当の問題は次のとおりです。

それにより、return キーワードと throw キーワードを使用する能力が奪われてしまいます。

それでは、この問題を改善する方法は何でしょうか?答えは「はい」です。Promise の概念の登場により、すべてがうまく解決されました。 Promise とは何かについては、検索するとたくさん紹介されていますので、ここではコピペせずに、問題を解決するためにどのように使用するかを主に説明します。

見てみましょう。Promise を使用すると、上の例はどのようになりますか? まず、これらの関数を Promise に変更してみましょう:

function asyncFunc1(){
 return new Promise(function (resolve, reject) {
  //...
 })
}

 
// asyncFunc2,3,4,5也实现成跟asyncFunc1一样的方式...

次に、それらがどのように呼び出されるかを見てみましょう:

asyncFunc1()
 .then(asyncFunc2)
 .then(asyncFunc3)
 .then(asyncFunc4)
 .then(asyncFunc5);

このように、これらの非同期関数は、 1つずつ順番に実行されます。

Promise は ES6 でネイティブにサポートされていますが、Promise がネイティブにサポートされていない環境では、Q.js や Bluebird など、Promise をサポートするサードパーティ ライブラリが多数あります。標準の Promise API に加えて、通常、非標準ではあるが非常に便利な API が提供され、非同期プロセスの制御がより洗練されます。

WeChat アプレットの API ドキュメントから、wx.setStorage()、wx.getStorage()、wx.getLocation() など、フレームワークによって提供される JavaScript API の多くの関数が実際には非同期であることがわかります。これらは、提供されるコールバック処理メソッドでもあり、success、fail、および complete コールバック関数をパラメータに渡すことで、操作の成功または失敗を個別に処理できます。

例:

wx.getLocation({ 
 type: 'wgs84', 
 success: function(res) { 
  var latitude = res.latitude 
  var longitude = res.longitude 
  var speed = res.speed 
  var accuracy = res.accuracy 
 },
 fail: function() {
  console.error("get location failed")
 }
})

WeChat アプレットの非同期 API を Promise に対応させることはできますか?答えは「はい」です。もちろん、Promise を使用してこれらの API を 1 つずつラップすることもできますが、それでもかなり面倒です。ただし、ミニ プログラムの API のパラメーター形式は比較的統一されているため、オブジェクト パラメーターは 1 つだけ受け入れられ、コールバックはこのパラメーターに設定されます。したがって、これにより、統一された処理が容易になり、非コードを記述することができます。このような作業を完了するための侵入的なツールのメソッド:

このツールのメソッドを util.js という名前のファイルに記述するとします:

var Promise = require('../libs/bluebird.min')  //我用了bluebird.js
function wxPromisify(fn) { 
 return function (obj = {}) {  
  return new Promise((resolve, reject) => {   
   obj.success = function (res) {    
    resolve(res)   
   }   

   obj.fail = function (res) {    
    reject(res)   
   }   

   fn(obj)  
  }) 
 }
}

module.exports = { 
 wxPromisify: wxPromisify
}

その後、このメソッドを使用して元のコールバック API を The way に変更する方法を見てみましょう。 Promise を作成するには:

var util = require('../utils/util')

var getLocationPromisified = util.wxPromisify(wx.getLocation)

getLocationPromisified({
 type: 'wgs84'
}).then(function (res) {
 var latitude = res.latitude 
 var longitude = res.longitude 
 var speed = res.speed 
 var accuracy = res.accuracy 
}).catch(function () {
 console.error("get location failed")
})

理解するのは簡単ですか?

以上がWeChatアプレットにおけるPromiseによる非同期処理処理の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。