thenが１回しか通らない理由

Question

htmlに

<div id="test" value="textContent"></div>

<script>
  fetch("http://127.0.0.1:8000/index/")
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(userJson) {
      console.log(2);
      console.log(userJson);
      const name = document.getElementById('test');
      name.textContent = userJson['A'];

  })

</script>

と書きました。console.log(1);は表示されるのにconsole.log(2);は表示されませんでした。

ブラウザ上でエラーは出ていませんでした。

https://qiita.com/optimisuke/items/02526d9f2fc9e47b94f4
https://developer.mozilla.org/ja/docs/Web/API/Body/json
を参考にしてコードを書きました。

何か間違っていますか？

Answer 1

普通考えればjsonではないデータを受け取ってエラーになっているのでしょう
catchしてみてください

fetch(url).then(res=>res.json()).then(console.log).catch(console.error);

Comments

[yyjfou]

ありがとうございます。Uncaught (in promise) TypeError: Cannot read property 'A' of undefined　とエラーが出ました。console.log(userJson);　はundefined と表示されました。これは単にjsonが取れていないだけなんでしょうか？

[yyjfou]

console.error　では何も表示されていませんでした。

[yambejp]

> Cannot read property 'A' of undefined

まで行っているならconsole.log(2)は通ってますよね？
戻り値がundefinedなのでAは参照できません

[yyjfou]

console.log(2)は通ってます
戻り値がundefinedなのでAは参照できません＝＞この場合はどうしたら良いですか？