ES 6モジュールはどのようにexport非同期操作結果を行いますか?

2111 ワード

ES 6モジュールを組織する場合、基本的な変数、複合タイプのオブジェクトや関数などがあります.しかし、モジュール内のコードにも非同期操作が発生する場合があります.モジュールは非同期操作の結果をexportから別のモジュールに呼び出すことができるように望んでいます.この場合はどう書きますか?本論文では、参考のために2つの方法を挙げます.
Promiseオブジェクトを利用する
exportから導いた変数のタイプは任意のJavascriptオブジェクトであってもいいです.Promiseオブジェクトを利用して非同期操作を代行し、Promiseオブジェクトをエクスポートし、Promiseを導入したところに成功/失敗のコールを追加すればいいです.
a.js
import {AsyncStorage} from 'react-native';
export async function getVariable() {
    let variable = await AsyncStorage.getItem("variable");
    return variable;
}
b.js
import {getVariable} from 'a.js';
getVariable().then(v=>{
    //       a       
}).catch(e=>{})

aファイルにはES 7のasync関数が使用されていますが、async関数は実行されるとすぐにPromiseオブジェクトに戻ります.すべてのawait後の非同期操作が終了したらPromiseの状態が変わります.async awaitを使わないなら、aファイルもこのように書くことができます.
import {AsyncStorage} from 'react-native';
export function getVariable() {
    return new Promise((resolve, reject)=>{
        AsyncStorage.getItem("variable").then(v=>{
            resolve(v);
        }).catch(e=>{
            reject(e);
        })
    })
}

非同期結果を直接エクスポート
a.js
import {AsyncStorage} from 'react-native';
export var variable;

AsyncStorage.getItem("variable").then(v=>{
    variable = v;  //            variable
}).catch(e=>{});

b.js
import {variable} from 'a.js';

console.log(variable);   //undefined

setTimeout(()=>{
    console.log(variable);   //         
}, 1000)

このような方式を採用すると、変数の導出が変化することに注意し、参照モジュールで特に注意しなければならない.
説明
上記の2つの方法を用いて非同期動作を導出できる結果は、ES 6のモジュールがCommunJSと異なるからである.
CommonJSモジュールが出力するのは値のコピーで、ES 6モジュールが出力するのは値の参照です.
阮一峰のES 6入門には以下のような詳しい説明があります.
CommunJSモジュールが出力するのは値のコピーです.つまり、一度値を出力すると、モジュール内部の変化はこの値に影響しません.ES 6モジュールの運行メカニズムはCommunJSとは異なります.JSエンジンがシナリオを静的に分析すると、モジュールローディングコマンドimportに出会うと、読み取り専用参照が生成されます.スクリプトが本当に実行されるまでは、この読み取り専用参照に基づいて、ロードされたモジュールに値を取りに行きます.言い換えれば、ES 6のimportはUnixシステムの「記号接続」に似ています.元の値が変わったら、importが読み込む値も変わります.したがって、ES 6モジュールは動的参照であり、値はキャッシュされず、モジュール内の変数はそのモジュールをバインドする.