fetchApiでresponseは返ってきているのに、Jsonに変換するときにエラーが出ている

Question

jQueryで非同期通信を行っている部分をjsのみで実装をしたいのですが、fetchApiでresponseは返ってきているのですが、Jsonに変換をしようとした際にエラーが起こっています。
なにが原因なのかわかりますでしょうか？
バックエンドはLaravelです。

エラー内容は以下なのですが、終了が正常ではないといわれていると思っていますが、記述方法には特に問題がないように思います、

Uncaught (in promise) SyntaxError: Unexpected end of JSON input at test

async function test() {
    const res = await fetch('/hogehoge',{
        method:"GET",
    });
    console.log(res);
    const data = await res.json();
    console.log(data);
}

test();

コンソール画面
resでは受け取れている。
dataではエラーが起こっている。

ちなみに、JQueryではdataが確認できています。

function getPlanPriceInfo(planId){
    $.ajax({
      url: '/get_plan_price_info',
      type: 'get',
      data: {
        plan_id : planId,
      },
      dataType: 'json'
    })
    .fail(function(){
    //   console.log('fail');
    })
    .done(function(data){
        setPlanPrice(data);
    });
    return true;
}

Comments

[ockeghem]

APIから戻ってくるレスポンスを追記してください。

Answer 1

戻ってくるjsonデータが不正なものでないならこんな感じで

const test=async ()=>{
  const url="・・・";
  const data= await fetch(url).then(res=>res.json());
  console.log(data);
};
test();

Comments

[yambejp]

ちなみに元のソースでもとくに問題なさそうな感じですけどね