jQuery Deferredの状態を調べる

Deferredオブジェクトの状態を調べます。pending、resolved、rejectedのいずれかを返します。デバック時などに有用なメソッドです。

書式

dfd.state()

var dfd = $.Deferred();
var state = dfd.state();

サンプル

Deferedオブジェクトの状態を取得して出力する

<body>
    <div class="main">
      <div class="header">
        <h1> サンプル </h1>
      </div>
      <div class="content">
        <form>
          <button class="button" type="button" name="button">Deferred</button>
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        function getProducts(){
          var dfd = $.Deferred();
          $('.desc').append(dfd.state() + '<br>');

          $.get('http://localhost/sample.php',{'flg':2}, null, 'json')
          .done(function(data){
            dfd.resolve(data);
            $('.desc').append(dfd.state() + '<br>');
          })
          .fail(function(){
            dfd.reject();
            $('.desc').append(dfd.state() + '<br>');
          });
          return dfd.promise();
        }

        $('button').on('click', function(){
          var promise = getProducts();

          promise
          .done(function(data){
            $('.desc').append(data.result);
          })
          .fail(function(data){
            $('.desc').append('APIコールに失敗しました。');
          });
        });
      });
    </script>
    </body>

カテゴリー:DeferredオブジェクトJavaScriptjQuery