dummyFetch が必要なシーン

まだ API ができていなくて、データをフェッチすることができない。しかし、非同期にデータを取ってくる前提で先にフロントの開発を進めたい。そういう場合に、さしあたってダミーのデータを使って開発を進めるが、本当に非同期処理に変更してもいけるか不安だ。みたいなことって結構ありませんか。

そういう時に promise を返す関数で、かつ何秒か明示的に待たせることのできる dummyFetch 関数を作ると便利です。

この関数の作成に timeout-as-promise という npm package が便利です。

実装

CodesandBox へのリンク

timeout-as-promise に ms 秒を渡すとそれだけ待って resolve する Promise を返してくれるので、これを await してからダミーのデータを返すメソッドを作ることができます。

この dummyFetch 関数は async を用いているのでこれ自体も Promise を返します。なので dummyFetch の Promise を async にした onClick でさらに await して使います。

気軽に非同期にデータをフェッチするメソッドをモック化できるので便利です。

React での実装
import React from "react";
import ReactDOM from "react-dom";

import delay from "timeout-as-promise";

// fetch 風に待つ関数
const dummyFetch = async () => {
  await delay(1000);
  return [1, 2, 3];
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { fetchedData: [], load: false };
  }
  onClick = async () => {
    this.setState({
      load: true
    });

    this.setState({
      fetchedData: []
    });

    // fetch 風に await する
    const res = await dummyFetch();

    this.setState({
      load: false
    });

    this.setState({
      fetchedData: res
    });
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>ダミーのフェッチ発動</button>
        <div>{this.state.load ? "loading" : ""}</div>
        <ul>
          {this.state.fetchedData.map(item => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);