540 文字
3 分
JavaScript 非同期処理
仕事でとある機能を実装する必要があり、それを簡略化すると、おおよそこのようなロジックになります。
bills.getData = function (monthNow) {
//DONE Get data of monthNow.
//url = 通过 monthNow 来决定 url 地址
var url = "api/data.json";
//noinspection JSUnusedGlobalSymbols
$.ajax({
url: url,
dataType: "json",
type: "GET",
success: function (d) {
Data = d;
},
error: function (d) {
window.console.log("error");
}
});
return Data
};
data = bills.getData(monthNow);
結果、テストしてみると全く意図した通りに動作しないことが判明しました。
デバッグしてみると、bills.getData
の実行が完了し、Data
が return
され、それに続く代入文も実行された後に、ajax
の success
イベントがトリガーされていることが分かりました。
これは明らかに間違っています。原因を分析してみましょう。ajax
リクエストは非同期であるため、実際には、bills.getData()
内の success
がまだ実行を完了していないうちに、Data
が既に return
されてしまっていたのです。
そのため、最後の代入文は実際には誤っており、ajax
リクエストの成功結果が代入されていませんでした。これは私たちの期待通りではありませんでした。
そこで、コードの構造を変更する必要がありました。ajax
リクエストが完了し、成功したことを確認した後に、代入文を実行する必要があるのです。
この効果を達成するには、callback
と promise
の2つの方法があります。
簡便さのため、ここでは callback
の形式を選択しました。すると、コードは以下のようになります。
// Data 是全局变量
bills.getData = function (monthNow, callback) {
//DONE Get data of monthNow.
//url = 通过 monthNow 来决定 url 地址
var url = "api/data.json";
//noinspection JSUnusedGlobalSymbols
$.ajax({
url: url,
dataType: "json",
type: "GET",
success: function (d) {
Data = d;
if (typeof callback === 'function') {
callback();
}
},
error: function (d) {
window.console.log("error");
}
});
};
bills.getData(monthNow,doSomeThing);
function doSomeThing(){
//doSomeThing with Data
}
これにより、callback
内の data
が ajax
リクエスト成功後の結果であることを保証できます。
この記事は 2015年7月5日 に公開され、2015年7月5日 に最終更新されました。3746 日が経過しており、内容が古くなっている可能性があります。