Ajax非同期処理を実装

2017/05/11
JavaScriptでAPIからデータ取得・処理する際、ネスト地獄で複雑なコードになりがち。 かと言って、AngularやReactなどのフレームワークを使うと勉強コスト、スパゲティー設計など本末転倒な結果になりやすい。 フレームワークの最大のデメリットは、

中で何が行われているか?ソースを解読しないとわからない

と言うことで、こみいった実装をせずシンプルに実装してみる。 (1) APIリクエストの配列設定 (2) Ajax処理の抽象化 (3) 並列処理の抽象化 (4) コールバック処理の考慮

    $(document).on('click', '.action-api', function() {
        //API設定(抽象化する必要あり)
        var requests = [
            {
                url: 'https://xxxx/api/user',
                params: {'user_id': 394},
                callback: callbackUser
            },
            {
                url: 'https://xxxx/api/order',
                params: {'user_id': 394, 'item_id': 31},
                callback: callbackApplication
            },
        ];

        //並列処理実行
        parallelAjax(requests, doneCallback);

        //各APIリクエストのコールバック
        function callbackUser(results) {
            console.log(results);
        }
        function callbackApplication(results) {
            console.log(results);
        }
        //並列処理完了後のコールバック
        function doneCallback(results) {
            console.log(results);
        }
    });

var requestAjax = function(values){
    var $ajax = $.ajax(values);
    var defer = new $.Deferred();
    $ajax.done(function(data, status, $ajax){
        defer.resolveWith(this, arguments);
    });
    $ajax.fail(function(data, status, $ajax){
        defer.resolveWith(this, arguments);
    });
    return $.extend({}, $ajax, defer.promise());
};

function parallelAjax(requests, callback) {
    var results = [];
    $.each (requests, function(index, value) {
        var $ajax = requestAjax({url: value.url, data: value.params}).done(function(res, status) {
            if (value.callback) {
                value.callback(res);
            }
        });
        results.push($ajax);
    });
    $.when.apply(null, results).done(function(){
        if (callback) callback(results);
    });
    $.when.apply(null, results).fail(function(){
    });
}

APIリクエストの配列設定

並列処理は後々ループで実行ため、オブジェクト配列で設定しておく。 差し当たり以下の項目で設定 ・URL ・URLパラメータ ・API処理後のコールバック (その他、POST/GETやデータ型なども設定できると良い?)

        var requests = [
            {
                url: 'https://xxxx/api/user',
                params: {'user_id': 394},
                callback: callbackUser
            },
            {
                url: 'https://xxxx/api/application',
                params: {'user_id': 394},
                callback: callbackApplication
            },
        ];
こうすることで、callbackを別モデル、ファイルなどに分離して記述できるかと。 実用レベルだと、APIリクエスト設定も動的に抽象化が必要ですが。。。

Ajax処理の一般化

並列処理をする際「jQuery.Deferred」を利用 ざっとした流れは、 (1) Deferredオブジェクトを作成 (2) Ajaxリクエスト (3) Ajax処理後返り値を Deferred.resolveWith() でコールバック 詳しくは、 ・「爆速でわかるjQuery.Deferred超入門」「結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話」を参照

var requestAjax = function(values) {
    var $ajax = $.ajax(values);
    var defer = new $.Deferred();
    $ajax.done(function(data, status, $ajax) {
        defer.resolveWith(this, arguments);
    });
    $ajax.fail(function(data, status, $ajax) {
        defer.resolveWith(this, arguments);
    });
    return $.extend({}, $ajax, defer.promise());
};

並列処理の一般化

(1) 配列化したリクエストをループで処理 (2) Ajax実行 (3) APIリクエストで設定したコールバックを実行 (3) $.whenで並列処理完了後の処理

function parallelAjax(requests, callback) {
    var results = [];
    $.each (requests, function(index, value) {
        var $ajax = requestAjax({url: value.url, data: value.params}).done(function(res, status) {
            if (value.callback) {
                value.callback(res);
            }
        });
        results.push($ajax);
    });
    $.when.apply(null, results).done(function(){
        if (callback) callback(results);
    });
    $.when.apply(null, results).fail(function(){
    });
}
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel 7 リリース
v-html でHTML表示する
Laravel で Vue コンポーネントを使う
Laravel で Nuxt.js を使ってみる(Docker環境)
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Dockerで不要なコンテナ・イメージを削除
Mac で Laradock の構築
Composer インストール
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019