ES 6モジュールはどのようにexport非同期操作結果を行いますか?
2111 ワード
ES 6モジュールを組織する場合、基本的な変数、複合タイプのオブジェクトや関数などがあります.しかし、モジュール内のコードにも非同期操作が発生する場合があります.モジュールは非同期操作の結果をexportから別のモジュールに呼び出すことができるように望んでいます.この場合はどう書きますか?本論文では、参考のために2つの方法を挙げます.
Promiseオブジェクトを利用する
exportから導いた変数のタイプは任意のJavascriptオブジェクトであってもいいです.Promiseオブジェクトを利用して非同期操作を代行し、Promiseオブジェクトをエクスポートし、Promiseを導入したところに成功/失敗のコールを追加すればいいです.
a.js
a.js
説明
上記の2つの方法を用いて非同期動作を導出できる結果は、ES 6のモジュールがCommunJSと異なるからである.
CommonJSモジュールが出力するのは値のコピーで、ES 6モジュールが出力するのは値の参照です.
阮一峰のES 6入門には以下のような詳しい説明があります.
CommunJSモジュールが出力するのは値のコピーです.つまり、一度値を出力すると、モジュール内部の変化はこの値に影響しません.ES 6モジュールの運行メカニズムはCommunJSとは異なります.JSエンジンがシナリオを静的に分析すると、モジュールローディングコマンドimportに出会うと、読み取り専用参照が生成されます.スクリプトが本当に実行されるまでは、この読み取り専用参照に基づいて、ロードされたモジュールに値を取りに行きます.言い換えれば、ES 6のimportはUnixシステムの「記号接続」に似ています.元の値が変わったら、importが読み込む値も変わります.したがって、ES 6モジュールは動的参照であり、値はキャッシュされず、モジュール内の変数はそのモジュールをバインドする.
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.jsimport {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.jsimport {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モジュールは動的参照であり、値はキャッシュされず、モジュール内の変数はそのモジュールをバインドする.