非同期カプセル化の改善: 戻り値による非同期呼び出しの処理 - Border City Inn

最後のいくつかの記事は WeChat ミニ プログラムの開発に関連しているため、誰かが「ミニ プログラムが理解できません。何か別のことを書いてもらえますか?」と尋ねました。

実際には、「小さなプログラム」ということにあまり注意を払う必要はありません。「小さなプログラム」はこの記事の開発シナリオにすぎないからです。私たちが実際に解決する問題は、小さなプログラムでのみ発生するわけではありません。 、そして問題を解決する手段は完全に ミニプログラムとは関係ありません！

1. 問題

プロキシによってカプセル化された WeChat アプレットの非同期呼び出しには問題が残っています:

Like wx.request() 戻り値があるこの状況をカプセル化するにはどうすればよいでしょうか?

リクエストの処理中にリクエストをキャンセルする必要がある場合は、wx.request() の戻り値:

const requestTask = wx.request(...);
if (...) {
    // 因为某些原因需要取消这次请求
    requestTask.abort();
}

Encapsulated awx が使用されます。 request() は Promise オブジェクトを返しますが、これは wx.request() の元の戻り値とは何の関係もありません。リクエストをキャンセルできるようにしたい場合は、wx.request() の元の戻り値を取り出す必要があります。

function wxPromisify(fn) {
    return async function (args) {
        return new Promise((resolve, reject) => {
            const originalResult = fn({
//          ^^^^^^^^^^^^^^^^^^^^^^^
//          怎么把 originalResult 带出去？
                ...(args || {}),
                success: res => resolve(res),
                fail: err => reject(err)
            });
        });
    };
}

2. 代替オプション

それほど複雑ではありませんが、いくつかのオプションを示します:

1. オブジェクトまたは配列を返し、後で使用します。脱構築。たとえば、return {promise,originalResult} または [promise,originalResult];
2. は、## などの「コンテナ」パラメータを通じて戻り値を取り出します。 #awx.request(params, outBox = {})、処理中に outBox に値を割り当てます: outBox.originalResult;
JS は動的型です追加の属性:
3. promise.originalResult = ... を使用して、Promise オブジェクトを直接変更できます。

await awx.request() を使用したいと考えています。 then await (または then()) なので、最初のメソッドはオプションではありません。

wxPromisify() を変換しましょう:

3. 失敗しました

return new Promise() だけでしたが、今は一時変数を追加するだけです:

function wxPromisify(fn) {
    return async function (args) {
        const promise = new Promise((resolve, reject) => {
//      ^^^^^^^^^^^^^^^^
            promise.originalResult = fn({
//          ^^^^^^^^^^^^^^^^^^^^^^^^^
                ...(args || {}),
                success: res => resolve(res),
                fail: err => reject(err)
            });
        });
        
        return promise;
//      ^^^^^^^^^^^^^^^
    };
}

TypeError: Cannot set property 'originalResult' of undefined

promise はローカル変数であり、直接アクセスできるため、サブスコープで使用しても問題ないと考えていました。ただし、このサブスコープがコンストラクター内にあることはここでは無視されます。大まかな分析をしてみましょう:

new Promise() はパラメータとして関数 (factory と呼ばれるものとします) を必要としますが、この関数の実行のタイミングは factory それは何ですか? new Promise() が Promise インスタンスを生成した後は、このインスタンスのメソッドを積極的に呼び出していないことに注意してください。したがって、構築プロセス中に factory が実行されると結論付けることができます。つまり、この時点では Promise インスタンスはまだ生成されておらず、promise は undefine を参照します。

4. 成功した試み

factory は Promise インスタンスの構築中に呼び出され、factory は関数本体で直接実行され、すぐに取得できます fnの戻り値なので、Promise インスタンスが構築された後は、元の戻り値を取得できます。 ここでコードを変更しましょう:

function wxPromisify(fn) {
    return async function (args) {
        let originalResult;
//      ^^^^^^^^^^^^^^^^^^^
        const promise = new Promise((resolve, reject) => {
            originalResult = fn({
//          ^^^^^^^^^^^^^^
                ...(args || {}),
                success: res => resolve(res),
                fail: err => reject(err)
            });
        });

        promise.originalResult = originalResult;
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        return promise;
    };
}

new Promise()

promise.originalResult に値を割り当てる必要があります。この " value" new Promise() の処理で生成されるので、ローカル変数 originalResult を追加するだけで取り出せます。 ＃＃＃＃＃＃ 終わり！ 5. 面白いけど真剣に受け止めるべきこと

注: 以下はエラーの例です。

function wxPromisify(fn) {
    return async function (args) {
        let promise = new Promise();
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        promise = new Promise((resolve, reject) => {
//      ^^^^^^^^^^
            promise.originalResult = fn({ ... });
//          ^^^^^^^^^^^^^^^^^^^^^^
        });

        return promise;
    };
}

ログイン後にコピー

TypeError

originalResult

ここでは 2 つの Promise オブジェクトが生成されます。

6. 再び

今回は例としてwx.request()を使用して元の戻り値を取り出します。その戻り値の主な目的は次のとおりです。リクエストをキャンセルするための .abort() メソッドを提供します。このアプリケーション シナリオは、実際には Axios が「キャンセル」を処理する方法と似ているため、cancelToken を通じて Axios によって実装されたメソッドを参照することもできます。 cancelToken の本質は、上で説明した 2 番目のメソッド、つまり、必要なものを取り出すために「コンテナ」オブジェクトを渡すことです。 Promise オブジェクトを通じてそれを取り出すことは、特別な「コンテナ」オブジェクトを通じてそれを取り出すことと本質的に同じであるため、これ以上は説明しません。

推奨チュートリアル: 「WeChat ミニ プログラム 」

以上が非同期カプセル化の改善: 戻り値による非同期呼び出しの処理 - Border City Innの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。