2016-05-15 5 views
1

コンポーネントのComponentDidMountライフサイクルメソッドで、データを取得するためのAJAXリクエストを開始しようとしています(アプリケーションがロードされているときにデータを利用可能にする必要があります)。点検の結果、私の約束は遅れてfailの物件に延期されていることに気付きました。これは、Chromeデベロッパーツールによる検査でリクエストが行われ、データが正常に返品されるため、混乱します(スクリーンショット参照)。私はそれがコンポーネントの読み込み速度の速さかもしれないと思っていました。コンポーネントライフマウントライフサイクルメソッドを試してみましたが、同じ結果が得られました。私はAJAXリクエストを介して同期的にデータを検索していましたが、現在は非同期機能を使用してコードを改善しようとしています。JQuery PromiseがComponentDidMountで失敗するReact.JS

componentDidMount: function(){ 
     var returnedClassesString; 

     var user = window.globalValue; 

     function getQueries(user){ 
      returnedClassesString = $.ajax("/portals/0/js/get_classes_front.aspx?userName="+user).done(function(data,err){ 
       console.log('good' + data); 
      }).fail(function(data,err){ 
       console.log(err); 
      }); 

     } 

     getQueries(user); 



    }, 

componentDidMount方法:クロームのDev-ツールの

componentDidMount: function(){ 
     var returnedClassesString; 

     var user = window.globalValue; 

     $.when($.ajax("/portals/0/js/get_classes_front.aspx?userName="+user)).then(function(data, textStatus, jqXHR) { 
      // Handle both XHR objects 
      console.log(data); 
      }).fail(function(){ 
        console.log('failed'); 
      }); 
    } 

スクリーンショット(ネットワークトラフィックを、私は、スタック内の最初のファイルを要求する):

新しいコードを試してみました

enter image description here

Chrome Dev-Toolsのスクリーンショット(JavaScriptコンソール「/失敗しました」メッセージ): enter image description here

+0

ajaxリクエストに問題があることを確認してください。 '$ .when($ .ajax())。then()。fail()'の代わりに '$ .ajax(...)。done()。fail()'を使用してください。応答は体内に何かを持っていますか?どのタイプのデータを取得する必要がありますか? –

+0

ねえ、私は実際にこれを試して、もう一度「失敗」しました。しかし今回は、「parseerror」(綴りのような)エラーコードをログアウトしました。私はデータの文字列を返すことが期待されています。私はデータを同期的に取得するときにAJAXリクエストを使用しましたが問題はなく、$ .get()も試しました。私は1つ以上のAJAXリクエストを持っているので$を試していました。解決するのを待っています –

+0

私は新しいコードを投稿しようとしています –

答えて

0

問題はサーバー側のコードにあります。 .Netコードビハインドを使用して、Response.ContentTypeResponse.ContentType = "text/xml";からResponse.ContentType = "text";に切り替えました。私のJSONエラーを発見するためのDave Methvinに感謝します。両方の例で上に掲載されたコードは依然として有効です。

関連する問題