Help us understand the problem. What is going on with this article?

AngularJSでAPIをコールし非同期で画面を更新する

More than 5 years have passed since last update.

先日にはてブのホットエントリになってたこの記事(Promises: ブラウザーJavaScriptの新しい非同期標準になるか?)をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。

というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました(応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます)。

デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3

スクリーンショット 2014-05-11 1.26.57.png

下記にソースの説明をします。
※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^;

① ソースツリーのWEB公開領域に、適当にJSONファイルを用意

app/data/sample.json
[
  {
    "id": "1",
    "name": "山田"
  },
  {
    "id": "2",
    "name": "鈴木"
  },
  {
    "id": "3",
    "name": "高橋"
   }
]

② JSONファイルにアクセスするFactoryを用意

擬似的に1秒間ウェイトしてから、結果を返すようにしています。

app/scripts/services/data.js
angular.module('apiTestApp')
  .factory('JsonData', function ($http) {

    return {

      getSampleData: function () {

        return $http.get('data/sample.json')
          .success(function(data, status, headers, config) {

            // 擬似的に、1秒間ウェイト
            var time = new Date().getTime();
            while (new Date().getTime() < time + 1000);

            return data;
          });
      }

    }

  })
;

③ Controllerから先程のFactoryを呼び出し

.then で先程のAPIアクセスの応答があった後に、画面にAPIの応答結果を表示するようにします。
AngularJSの場合、リアルタイムのデータバイングが働くので、簡単に書けますね^^

応答を待つ間に、後続に書いた処理(今回だと $scope.show_loading = true; の行)が実行されます。
今回は応答を待つ間は画面に「読み込み中」と表示することにします。

app/scripts/controllers/main.js
angular.module('apiTestApp')
  .controller('MainCtrl', ['$scope', 'JsonData', function ($scope, JsonData) {

    // こっちの書き方はNGパターン
    //$scope.items = JsonData.getSampleData().data;

    JsonData.getSampleData().then(function(res){
        $scope.items = res.data;
        $scope.show_loading = false; // ローディング中、を非表示へ
      }
    );

    $scope.show_loading = true; // ローディング中、を表示

  }])
;

④ ViewでHTMLへ表示

app/views/main.html
<div ng-controller="MainCtrl">
  この間の部分が非同期での読み込み<br>
  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓<br>
  <div ng-show="show_loading">
    読み込み中..
  </div>
  <li ng-repeat="item in items">
    {{item.id}} - {{item.name}}
  </li>
  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓<br>
</div>

⑤ 結果はこんな感じ

スクリーンショット 2014-05-11 1.26.57.png

スクリーンショット 2014-05-11 1.24.16.png

デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3

ほか

hkusu
Software Engineer @ Yumemi, Inc JavaScript / Android / Kotlin / AWS etc..
http://hkusu.github.io
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away