xhr.onreadystatechange内でカウントしたものが外で未定義になってしまう

Question

前提・実現したいこと

AjaxでフィードURLから取得したアイテムの件数を外でも使用したい

発生している問題・エラーメッセージ

xhr.onreadystatechange(function(){})内で取得したアイテムの件数を外の変数に加算しているのですが、
コンソール上で確認すると「undefind」未定義であると表示されます。

以下は該当部分のサンプルです。

該当のソースコード

private _feedItemCount=0;

info(){
    var domParser = DOMParser();
    var xhr = new XMLHttpRequest();
    xhr.open('GET',feedURL);
    xhr.send();
   
    xhr.onreadystatechange = function() {

        if(xhr.readyState === 4 && xhr.status === 200){

            if(typeof(xhr.response) === 'string'){

                try{
                    var feed_data:Document = domParser.parseFromString(xhr.response, "text/html");
                    var items = feed_data.getElementsByTagName('item');

                    //総取得件数に加える
                    _feedItemCount+= items.length;
                }catch{}
            }
       }
    }

    console.log(_feedItemCount);    //undefind
}

試したこと

xhr.onreadystatechangeの中でitems.lengthを確認したところ、問題なく取得件数をとれており、_feedItemCountに加算して
コンソールで確認しても、問題はありませんでした。

何か見落としていることがあるのでしょうか？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kairi003]

privateで宣言していますがクラス内なのでしょうか?

[poppoas]

クラス内だからprivateで宣言しています。

Answer 1

AjaxでフィードURLから取得したアイテムの件数を外でも使用したい

Ajax は非同期処理なので、順番の問題です。
ご質問の console.log() は xhr.readyState が 4未満の時点で実行されています。
このため、値は未代入で、初期値（undefined）が出力されています。

対策は、次の２つです。

1. async/await でフロー制御できる fetchを使う（PromiseベースのXHRと考える）。
2. 古典的な手法として、callback で変数への代入を検知する（あるいは、値を受け取る）。

---

コメントを受けて

fetch はモダン環境のJavaScriptにおいては標準です。
MDN fetch ブラウザサポート状況

ご質問のタグには「TypeScript」があり、「IEサポートの継続 が要件にある」場合は、コールバックによる手法になりそうです。

//private _feedItemCount=0
var _feedItemCount=0;

function getFeedItems(url, callback) {
  var domParser = DOMParser();
  var xhr = new XMLHttpRequest();
  xhr.open('GET',url);
  xhr.send();

  xhr.onreadystatechange = function() {
    var feed_data, feed_items;
    if(xhr.readyState === 4 && xhr.status === 200){

      if(typeof(xhr.response) === 'string'){
        try{
          //var feed_data:Document = domParser.parseFromString(xhr.response, "text/html");
          feed_data = domParser.parseFromString(xhr.response, "text/html");
          feed_items = feed_data.getElementsByTagName('item');
        }
        //catch {}
        catch(e) {}

        callback( feed_items );
      }
    }
  }
};

getFeedItems(feedURL, function( items ){
  _feedItemCount += items.length;
  console.log( _feedItemCount )
})

※TypeScript はよくわかってないので、TypeScript独特の文と感じた箇所をコメントアウトし、JavaScript でサンプルを追記させていただきました。

もし、TypeScript でトランスパイル後、 undefined になるようでしたら、スコープも疑ってみてください。

Comments

[poppoas]

ありがとうございます。
ご指摘の通り、恐らく非同期処理での順番が問題ですね。

fetchは初めてききましたが、これはJavaScript標準のものですか？
今実装をしているXHRと置き換えて、XHRと同じように利用できるというものでしょうか？

callbackでの変数への代入を検知というのは、どういう感じになりますでしょうか？
ちょっとイメージがわかないので、もしお時間よろしければご教示いただけないでしょうか？

質問ばかりで申し訳ありませんが、よろしければお教えください。

[poppoas]

すみません、fetchはIEでの利用ができないみたいなので、今回の仕様では利用できないものでした。
callbackのやり方だけでもご教示頂ければ幸いです。

[AkitoshiManabe]

追記しました。TypeScript の型付けが必要な箇所は修正してください。
> callbackでの変数への代入を検知
「callback が実行されたかどうかで判断する」というものです

[poppoas]

ご丁寧にわかりやすい回答ありがとうございます。
callbackを利用したことがなかったので、まだピンときていないのですが、
教えていただいたコード上でいうなら
callback(feed_items)
が呼ばれたということはその下にある

getFeedItems(feedURL, function( items ){
_feedItemCount += items.length;
console.log( _feedItemCount )
})

が実行されて、カウンタが増加するといった感じの解釈でしょうか？

[AkitoshiManabe]

そのとおりです。 xhr.readyState===4 は 通信完了ですので、　DOMParser で フィードを解析後、item 要素の一覧（コレクション）を得る方法を考えてみました。

[poppoas]

なるほどですね。やっと腹落ちしました。
このやり方で今一度やってみたいと思います。
最後までご丁寧にありがとうございました。

[poppoas]

※すみません、自己解決しました。
度々すみません、良ければお教えいただきたいのですが、
callbackする関数は自分自身でないといけませんか？

getFeedItemsCount( function( items ){
_feedItemCount += items.length;
console.log( _feedItemCount )
})

のようにコールバックする関数を別の関数にしても同じ結果になるでしょうか？

[AkitoshiManabe]

callbackは イベントリスナみたいな関数という考え方がわかりやすいと思います。実行時、引数に渡されるのが event オブジェクトではなく、 callback() の実行箇所で指定した「任意の引数」になる点が イベントリスナとの違いです。
callback の処理内容も必要に応じて変えることができますので、仮にインスタンスのメソッドで受け取りたい場合、oj.method.bind(oj) とすることもできます（TypeScriptでの記述方法はチョット分かりませんが）。

[poppoas]

すみません、またご丁寧にありがとうございます。
すごく助かります。
>callbackは イベントリスナみたいな関数という考え方がわかりやすいと思います
これすごくわかりやすいなと感じました。
callback()の実行箇所がイベントの発行場所になるイメージですね。
またその際にはcallback()で指定した「任意の引数」になるイメージ。とてもわかりやすいです。
ありがとうございます！！

Answer 2

privateで宣言されていることから、これは変数はなくクラスのフィールド定義に見えるのですが、それならインスタンスが自己参照するためにthis._feedItemCountとする必要があります。
なので宣言さてれていない変数_feedItemCountはundefinedです。
また他の回答者さんも言っていますがxhrは非同期なのでこのconsole.logだと0になります。

itemsのことなら「外の変数」には見えませんが…
グローバル変数ならonreadystatechangeの前くらいに宣言しないと意味ないです。

Comments

[poppoas]

_feedItemCount+= items.length;
itemsの要素の数はグローバル変数であるfeedItemCountに追加してます。

[kairi003]

すみません、勘違いしてました