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 リクエスト成功後の結果であることを保証できます。
