使用非同期/のawaitマイクロチャネルアプレット

小さなプログラムの多数のマイクロチャネルインターフェイスは、例えば、非同期呼び出しでありwx.login()wx.request()wx.getUserInfo()、パラメータ、および定義されるオブジェクトの使用でありsuccess()fail()そしてcomplete()異なる状況下での非同期コールバック呼び出し。

これらのことを行うための処理に必要がある場合は、プログラムを書くためのコールバックの方法は、実際には、傷つけます:

  • wx.getStorage() キャッシュされたデータを取得し、ログイン状態を確認
  • wx.getSetting() 構成情報、
  • wx.login() 構成情報を使用してログイン
  • wx.getUserInfo() ユーザー情報についてログイン
  • wx.request() サービスサーバにデータ要求を開始
  • ......

だから、このコードはおそらく社長です

wx.getStorage({
    fail: () => {
        wx.getSetting({
            success: settings => {
                wx.login({
                    success: ({ code }) => {
                        wx.getUesrInfo({
                            code,
                            success: (userInfo) => {
                                wx.request({
                                    success: () => {
                                        // do something
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
    }
});

明らかに、非同期/のawait同じ論理缶コードがはるかに快適になります。ただし、デフォルトでは、「マイクロチャネルの開発ツールは、」非同期/のawaitをサポートしていません。どのように有効にするには?

1.非同期/のawaitを過ごします

興味を持っている場合、マイクロチャネルは、公式文書検索アプレットasync「見つけることができるツール⇒開発援助⇒コードコンパイラ」ページを非同期/のawaitのためのケースをサポートして言及し、「増加コンパイル」テーブルセクション、抜粋であります:

1.02.1904282開発ツールの以降のバージョンでは、ロジックを使用し、使用する開発者のための追加オプションを提供する新しいコンパイラを有効にした後、ES5のES6ターンを強化するために、コンパイラオプションを強化する機能を追加します。

プロパティ オリジナルロジック 強化されたコンパイラ
非同期/待ちます サポートしていません。 サポート
  • サポート非同期/のawait文法、オンデマンド注入regeneratorRuntime、同じディレクトリの場所とヘルパー

限り「と一言で言えば、それは、マイクロチャネルの開発ツール、」に更新v1.02.1904282上記の、あなたがやって必要のないnpm install regeneratorそういったことを、あなただけの設定項目を使用することができます変更する必要があるasync/awaitの特性を。「ツールバー⇒詳細⇒ローカル設定」ページでこの設定。

使用非同期/のawaitマイクロチャネルアプレット

迅速非同期/のawait利用可能性を検証するために、中にイベントコードの機能が追加されました:app.jsonLaunch()

(async () => {
    const p = await new Promise(resolve => {
        setTimeout(() => resolve("hello async/await"), 1000);
    });
    console.log(p);
})();

自動的にコンソール]タブのデバッガインタフェースでコンパイル短期出力で見ることができた後。

hello async/await

ない場合は、バージョン「マイクロチャネルの開発者ツール」をチェック - 最新バージョンをダウンロードするには、少なくとも、問題になることはありません。

2.変換は、非同期メソッドをwx.abcd

非同期が/受信のサポートを待つが、運ぶために持っていたwx.abcd()仕事の約束のスタイルとしてパッケージを。

Node.jsのはutilのモジュールを提供promisify約束Node.jsのスタイルのコールバックスタイルに変換するが、どうやらそれはWXスタイルには適用されません。それでも自分は、WX-スタイルの非同期呼び出しの形式が同じであるなど、あまり考えていない、その特性は次の通りです:

  • 三回の大コールバックを含む、すべてのパラメータを使用して、オブジェクト、
  • success: (res) => any 非同期コールバックメソッドで正常に
  • fail: (err) => any 非同期コールバックメソッドが失敗するには
  • complete: () => any (かかわらず、成功または失敗の)非同期方式で完了コールバック時

あなたがあれば、wx.abcd()非同期/のawaitによって書かれた約束のスタイルを変え、おそらくこのようになるはずです

try {
    const res = wx.abcd();
    // do anything in success callback
} catch (err) {
    // do anything in fail callback
} finally {
    // do anything in complete callback
}

もちろん、catchおよびfinallyこれらの2つの部分が、必ずしも使用する必要はありません、と言うことですつまり、必要ではないtryブロックを。そうでない場合は、catch神のピット存在があるだろう、問題が戻って言います。今最初に行うべきことはあるの改革

2.1定義)(promisify

promisify()オリジナルを渡し、パッケージング機能でwx.abcd、新たな機能が約束のスタイルを返し、参加者として。次のようにコードとは説明しました:

function promisify(fn) {
    // promisify() 返回的是一个函数,
    // 这个函数跟传入的 fn(即 wx.abcd) 签名相同(或兼容)
    return async function(args) {
    //                    ^^^^ 接受一个单一参数对象
        return new Promise((resolve, reject) => {
    //             ^^^^^^^^^^^ 返回一个 Promise 对象
            fn({
    //      ^^ ^ 调用原函数并使用改造过的新的参数对象
                ...(args || {}),
    //          ^^^^^^^^        这个新参数对象得有原本传入的参数,
    //                      ^^  当然得兼容没有传入参数的情况
                success: res => resolve(res),
    //          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^  注入 success 回调,resovle 它
                fail: err => reject(err)
    //          ^^^^^^^^^^^^^^^^^^^^^^^^ 注入 fail 回调,reject 它
            });
        });
    };
}

それを使用する例:

const asyncLogin = promisify(wx.login);  // 注意别写成 wx.login(),为什么,我不说
try {
    const res = asyncLogin();
    const code = res.code;
    // do something with code
} catch (err) {
    // login error
} finally {
    // promisify 里没有专门注入 complete 回调,
    // 因为 complete 的内容可以写在这里
}

2.2定義 wx.async()

正直、によって非同期メソッドの使用promisify書き込み又は迷惑な1つのプロセスは、一度外の変換の方法を使用するユーティリティ関数を記述する方がよいです。しかし、チェック、wx非同期メソッドの数を定義するには、知っている、または使用何ターン何のために解決することができますが、バッチターン、パッケージまたはオブジェクトで結果を出しになりません。全体のプロセスは、各処理の最終結果が一緒にフォーカス、反復プロセスです。

function toAsync(names) {   // 这里 names 期望是一个数组
    return (names || [])
        .map(name => (
            {
                name,
                member: wx[name]
            }
        ))
        .filter(t => typeof t.member === "function")
        .reduce((r, t) => {
            r[t.name] = promisify(wx[t.name]);
            return r;
        }, {});
}

このtoAsync使い方は大体このようなものです

const awx = toAsync(["login", "request"]);
await awx.login();
await awx.request({...});

一部の人々は、より多くの単一のパラメータは次のように渡された方法に慣れすることができます

const awx = toAsync("login", "request");

次いでtoAsyncするパラメータの定義...namesたい、すなわち

function toAsync(...names) { ... }

私はすべてのJSファイルに行きたくないので、終了していませんimport { toAsync } from ...だから、それを置くApp.onLaunch()に注入、それをwxこのようにオブジェクト

App({
    onLaunch: function() {
        // ...
        wx.async = toAsync;
        // ...
    }
});

3.のawait神はピットをもたらします

、コードも抜本的な変革を行うため準備ツールは、それははるかに快適そうですが、実行を与えられています!なぜ?

元のコードのセクションではまず見て、これは、

wx.getStorage({
    key: "blabla",
    success: res => {
        // do with res
    }
});

変換は、そうした後

const res = await awx.getStorage({ key: "blabla" });  // <== runtime error
// do with res

awx.getStorageスローされた例外は、原因と呼ばれ"blabal"、このデータのは存在しません。

なぜ間違っているが、今与えられていませんでしたか?

元が定義されていないのでfail、コールバックを、そのエラーは無視されます。しかし、補正が封入されてしまうので、オブジェクトは約束を返され、必要がします処理されます。私たちは、直接プロミスオブジェクトを使用していませんが、と文法、それが例外をスローの形で反映されます。promisify()failreject()awx.getStorage()catch()awaitreject()

雇用主は、コードがこのような変化であったと言って:

try {
    const res = await awx.getStorage({ key: "blabla" });  // <== runtime error
    // do with res
} catch (err) {
    // 我知道有错,就是当它不存在!
}

悲しいではないでしょうか?悲しいない場合、あなたはそれについて考える、すべての呼び出しは使用すべきであるtry ... catch ...、ブロックを傷つけることはできませんか?

3.1。治療を必要としないエラーを無視

エラーを処理することは、本当に良い習慣ですが、それは実際にすべてのエラー状態が対処する必要はありません。実際には、非常に単純な、エラーを無視し、直接文のような、各プロミス非同期転送フォームの背後にある線に追加されます

const res = await awx
    .getStorage({ key: "blabla" })
    .catch(() => {});
//  ^^^^^^^^^^^^^^^^ 捕捉错误,但什么也不干

少し説明、ここでawx.getStorage()呼び出すオブジェクトに約束オブジェクトを返す.catch()状況は、パッケージを拒否し、それが新しいプロミスオブジェクト、戻りますawait約束を待っているの。

しかし、それは感じて.catch(() =&gt; {})、その後、奇妙な書き込みを変更することでした方法、にそれをパッケージ化するPromiseプロトタイプのクラスを

Promise.prototype.ignoreError = function() {
    return this.catch(() => { });
};

このコードは、上に定義されるtoAsync()前のように。

それが起こったようにも使用され

const res = await awx
    .getStorage({ key: "blabla" })
    .ignoreError();

シングルのためawaitの非同期呼び出し、あなたが書きたくないtry ... catch ...ブロックを、また、あなた自身のA定義することができifError(fn)、エラーを処理するために。しかし、あなたは、バッチ処理エラーが必要な場合、またはtry ... catch ...スムーズに開始することにより:

スタート4.戻ります

try {
    const storeValue = await awx.getStorage({});
    const settings = await awx.getSetting();
    const { code } = await awx.login();
    const userInfo = await awx.getUserInfo({ code });
} catch (err) {
    // 处理错误吧
}

ルック、各非同期の定義のための呼び出しに不要failコールバック、try ... catch ...非同期の利点ではありません、すべての可能なエラーは、/待っていること!プロセス

おすすめ

転載: blog.51cto.com/jamesfancy/2476901