@Tsuyoshi087posted at 2024-12-09

kyを使用してテスト用APIで通信を行い、Chromeのネットワークタブで通信が確認できるようにしたい

Q&A

Closed

解決したいこと

ReactとTypeScriptで開発中のアプリケーションにおいて、kyを使用してテスト用APIで通信を行い、Chromeのネットワークタブで通信が確認できるようにしたい。

発生している問題・エラー

- ネットワークタブの問題
    - プレビューとレスポンスで「レスポンスデータの読み込みに失敗しました：No resource with given identifier found」と表示される。
    - リクエストメソッド、ステータスコード、リモートアドレスが表示されない。

- コンソールタブの問題
    - フェッチ が GET "https://jsonplaceholder.typicode.com/todos" の読み込みに失敗しました。

実際のネットワーク画像

実際のコンソール画像

該当するソースコード

import ky from 'ky';

try {
  // JSONPlaceholder APIのtodosエンドポイントにGETリクエストを送信
  const response = await ky
    .get('https://jsonplaceholder.typicode.com/todos')
    .json(); // JSON形式でレスポンスをパース

  console.log(response); // レスポンスデータをコンソールに表示
} catch (error) {
  console.error('APIリクエスト中にエラーが発生しました:', error);
}

自分で試したこと

Postmanで同じURLに対して値の取得確認を行い、成功した。
try-catchブロックを使用してエラーを補足しようとしたが、何も引っかからなかった。
Chromeのネットワークタブでリクエストの確認を試みたが、メソッド、ステータスコードなどが表示されなかった。

1Answer

@itagagaki posted at 2024-12-10

解決にはならないかもですが、Firefoxの開発者ツールで試してみることはできますか？

0Like

Comments

@Tsuyoshi087

Questioner

回答ありがとうございます。Firefoxの方でも確認してみます。
現状の調査で分かったことですが、useEffectの中でAPI通信すると成功し、ボタン押下処理の中では変わらず同じAPI通信を失敗します。


// API通信成功
useEffect(() => {
    fetch('APIのエンドポイントを記述')
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((data) => setTask(data))
      .catch((error) => console.error('Fetching data failed', error))
}, [])

// API通信失敗
const onLoginSubmit = async () => {
    fetch('APIのエンドポイントを記述')
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((data) => setTask(data))
      .catch((error) => console.error('Fetching data failed', error))
}

@Tsuyoshi087
Questioner
デフォルトでは、form タグが onLoginSubmit イベントをトリガーすると、ブラウザはそのフォームの内容を送信し、通常はページをリロードします。このリロードによって、JavaScriptの非同期処理（API通信など）に影響を与え、処理が完了する前にページが更新されてしまうことがあります。

上記内容が原因だったぽいです。onLoginSubmit関数にe.preventDefault()を追加することによって解決できました。
※コードの情報量が少なくて申し訳ないです。

Are you sure you want to delete the question?