React Hooks + Suspense + fetch で api からデータ取得

前回、React Hooks + Suspense でコード上のデータを setTimeout() を用いて、非同期として取得しました。

React Hooks + Suspense を試す
https://nomad.office-aship.info/react-hooks-suspense

今回、fetch API を使い、サーバーから json を取得し、表示してみます。

適当なjsonを返すサーバーとして以下を選びました。
https://jsonplaceholder.typicode.com/todos

こいつの title を抜き出して、表示させてみます。

修正するポイントとしては、前回のコードのうち
const fetchTodoList の部分を以下に置き換えるだけです。

const fetchTodoList = () => {
  const promise = new Promise((resolve, reject) => {
      fetch("https://jsonplaceholder.typicode.com/todos")
        .then(response => {
            if (!response.ok) {
                console.error("エラーレスポンス", response);
            } else {
                response.json().then(data => {
                    let array: string[] = []

                    data.forEach((dict: { [key: string]: string; }) => {
                      array.push(dict.title)
                    });

                    resolve(array)
                });
            }
        }).catch(error => {
            console.error(error);
        });
  });

  return wrapPromise(promise);
};

成功すると以下のように表示されます。