ItemFileReadStoreクエリとの非同期混乱

Question

itemFileReadStoreを使用してボックスの配列にクエリの結果を保存しますが、戻り値が空です（おそらくfetchが非同期に実行されるため）。

gotItems関数は、私が望むように配列を作成しますが、私はそれを自分のもとに戻すことはできません！私はgotItemsの部分に残りの機能を組み込むことができますが、それは私のコードを未知にしてしまいます。

gotItems関数からJavaScriptで一般的に使用する配列を返すにはどうすればよいですか？

function getContentFile() { 
    contentStore = new dojo.data.ItemFileReadStore({ 
    url: '../config/content.json', 
preventCache : true 
    }); 

    var boxes = new Array(); 
    contentStore.fetch({query: {partner : 'enabled'}, onItem: gotItems }); 
    return boxes; 
} 

function gotItems(item) { 
    boxes.push(contentStore.getValue(item,'title')); 
    console.log(boxes); 
    return boxes; 
} 

dojo.addOnLoad(function() { 
    boxes = getContentFile(); 
    console.log(boxes); 
    fadeIn('header', 500, 0); 
}); 

Answer 1

非同期操作の世界へようこそ。

「継続スタイル」のプログラミングで行う必要があります。 ItemFileReadStoreのフェッチ操作は非同期です。つまり、あなたが既に知っているように、それにgotItems継続を渡します。

contentStore.fetch({query: {partner : 'enabled'}, onItem: gotItems })はすぐに戻ります。 boxesは、その時点で（JavaScriptはシングルスレッドなので）空になります。 gotItemsは、データが到着した後に実行され、の後にが返され、戻り値はdojo.addOnLoadに返されます。継続gotItems自体の内部

console.log(boxes); 
    fadeIn('header', 500, 0); 

：

はあなたの処理コードを配置する必要があります。例えば、のようなもの：

function gotItems(item) { 
    var boxes = []; 
    dojo.forEach(item, function(box) { 
    boxes.push(contentStore.getValue(box,'title')); 
    }); 
    console.log(boxes); // You probably need to store "boxes" somewhere instead of just logging it 
    fadeIn('header', 500, 0); 
} 

はまた、onItemsに渡されるデータは配列であるので、あなたはそれを反復処理する必要があります。

Answer 2

推測したとおりに、取得操作が非同期に実行されるため、関数が返されたときに結果にアクセスできません。

結果を使用するコードをgotItems()関数（Stephenが回答）に入れるか、または遅延と約束を使うことができます。 IMHOは、より良いコードを整理することができるので、より良い選択肢です（約束事を扱う慣用句に慣れれば、コードはより自然に読み込まれます）。そして、同期操作と非同期操作の両方を透過的に実行できます。

thesetwoトピックに関するチュートリアルを参照してください。あなたのケースでは

、のDeferredを含む可能性のある解決策は次のように読みます：

function getContentFile() { 
    contentStore = new dojo.data.ItemFileReadStore({ 
    url: '../config/content.json', 
    preventCache: true 
    }); 

    var dfd = new dojo.Deferred(); 
    var boxes = new Array(); 
    contentStore.fetch({ 
    query: { partner : 'enabled' }, 
    onItem: function(item) { 
     boxes.push(contentStore.getValue(item,'title')); 
    }, 
    onComplete: function() { 
     // resolve the promise and execute the function in then() 
     dfd.callback(boxes); 
    } 
    }); 
    return dfd; 
} 

dojo.addOnLoad(function() { 
    getContentFile().then(function(boxes) { 
    console.log(boxes); 
    fadeIn('header', 500, 0); 
    }); 
}); 

は、