Unexpected end of JSON inputエラーが解消できません。

Question

fetchを使って非同期通信での画面表示およびデータベースの更新をしたいのですが、エラーが出てしまっており、解消できずにおります。

like.js

'use strict';

const likeBtns = document.querySelectorAll('.like');
let likeCount = 0

likeBtns.forEach(likeBtn => {
  const likeNum = likeBtn.parentNode.lastChild;
  
  likeNum.textContent = likeCount;
  
  
  likeBtn.addEventListener('click', ()=>{
    likeCount++;
    
    //更新後のlike数をappendしています
    const formData = new FormData();
    formData.append('like', likeCount);
    
　　//postのidをappendしています
    const postId = likeBtn.parentNode.parentNode.parentNode.dataset.postId;
    formData.append('id', postId);
    
    const token = document.getElementsByName('csrf-token').item(0).content;
    
    fetch('/like', {
      method:'POST',
      headers:{
        'X-CSRF-TOKEN': token
      },
      body:formData
    })
    .then(function(response) {
      console.log(response); //こちらではresuponseが返ってきているようです
      return response.json(); //こちらがエラーが示す３２行目です
    })
    .then(function(json) {
      console.log(json); //（エラーで止まってしまっているから？）こちらは表示されません
    });
  });
});

上記のJavascriptではlikeボタンがクリックされたら更新情報を/like（PostController.phpのlikeメソッドに行き着きます）に向けて送信してデータベースを更新したいのですが、likeボタンをクリックすると、chromeのコンソールに以下のエラーが表示されてしまいます。

Uncaught (in promise) SyntaxError: Unexpected end of JSON input at like.js:32

どうやらreturn response.json();がエラーとなってしまっているようなのですが、調べても原因にいきつけませんでした。

ちなみにconsole.log(response);では以下の通り、responseが返ってきているようです。

Response {type: "basic", url: "http://localhost/like", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost/like"
__proto__: Response

こちらが、chromeのデベロッパーツール（networkタブ）での該当通信です。

そして、以下がデータの送信先のPostController.phpです。

PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Post;

class PostController extends Controller
{
  public function like(Request $request)
  {
    $post = Post::find($request->id);
    $post->like = $request->like;
    
    $post->save();
  }
}

まだfetchについて理解ができていない部分が多々あるため、ご回答いただいた内容の理解に時間が掛かってしまうかもしれませんが、どうかアドバイスをお願いいたします。

Answer 1

laravelがよくわかっていないので不確かなのですが、このPostController.like メソッドのコードだと
応答を特に返していないように見えます。

$post->save(); の次に以下を追加してレスポンスを返すようにしてみてはいかがでしょうか。
return response()->json(['result' => 'ok']);

Comments

[T.Takeda]

ご解答ありがとうございます。コントローラからjsonを返してあげたところ、確認が出来ました！

追加で質問させていただきたいのですが、レスポンスを受け取った後、return response.json();でJSON を抽出し、その後の２つ目のthenの中でJSON.parse(json);をしてみたところ、エラーとなってしまいました。
（すみませんが、今すぐンにエラーを提示できません。。。）

２つ目のthenの中の引数はJSON形式なので変換する必要があると認識していたのですが、渡されてきているjsonはJSON形式ではないのでしょうか。

よろしくお願いいたします。

[YakumoSaki]

二番目のthenの中の引数は、そのまま console.log していただくとわかるかもしれませんが、
Javascriptのオブジェクトというか連想配列になっています。ようするに、JSON.parse() は済んだ状態なはずです。

[T.Takeda]

返信が遅くなってしまい、申し訳ありません。
確かにJSON形式にはなっていないことは確認しております。
当質問は解決済みとさせていただきます。ありがとうございました！