抹桥的博客
Language
Home
Archive
About
GitHub
Language
主题色
250
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 の実行が完了し、Datareturn され、それに続く代入文も実行された後に、ajaxsuccess イベントがトリガーされていることが分かりました。 これは明らかに間違っています。原因を分析してみましょう。ajax リクエストは非同期であるため、実際には、bills.getData() 内の success がまだ実行を完了していないうちに、Data が既に return されてしまっていたのです。 そのため、最後の代入文は実際には誤っており、ajax リクエストの成功結果が代入されていませんでした。これは私たちの期待通りではありませんでした。 そこで、コードの構造を変更する必要がありました。ajax リクエストが完了し、成功したことを確認した後に、代入文を実行する必要があるのです。 この効果を達成するには、callbackpromise の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 内の dataajax リクエスト成功後の結果であることを保証できます。

この記事は 2015年7月5日 に公開され、2015年7月5日 に最終更新されました。3746 日が経過しており、内容が古くなっている可能性があります。

JavaScript 非同期処理
https://blog.kisnows.com/ja-JP/2015/07/05/asynchronous-javascript-ajax/
作者
Kisnows
公開日
2015-07-05
ライセンス
CC BY-NC-ND 4.0