小さなプログラムの多数のマイクロチャネルインターフェイスは、例えば、非同期呼び出しであり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利用可能性を検証するために、中にイベントコードの機能が追加されました:app.js
onLaunch()
(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()
fail
reject()
awx.getStorage()
catch()
await
reject()
雇用主は、コードがこのような変化であったと言って:
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(() => {})
、その後、奇妙な書き込みを変更することでした方法、にそれをパッケージ化する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 ...
非同期の利点ではありません、すべての可能なエラーは、/待っていること!プロセス