UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. 非同期処理の中間状態のハンドリング
    00:40
  • 2. 各フレームワークでありがちな処理方法
    02:02
  • 3. 外部パッケージと組み合わせての解決方法
    07:55
  • 4. React.Suspense への期待
    15:30
  • 5. クロージング
    21:40

ep.26 非同期処理における Pending と Empty の取り扱いの話

2019/10/17
459 views
HANATANI Takuma緑豆はるさめ

@potato4d と @spring_raining が、SPA の非同期処理における待受状態とリソースが空だった場合の処理の違いについて話しました。

  • SPA の非同期処理の状態管理どうしてる?
    • 待受中
    • 取得成功してリソースが length >= 1 の場合の処理
    • 取得成功してリソースが length == 0 の場合の処理
    • 失敗したときの処理
    • の管理が辛い話
  • よくある悩み
    • HTTP リクエスト用の状態がグローバル全体に影響する
      • それぞれのロード状態を組み合わせて表示が変わることがある
      • 利用するコンポーネントが持っておきたい状態に関するデータがグローバルステート + 組み合わせのマトリクスで辛い
        • 大量にグローバルに生える enum もつらい
    • スピナーが大量になる問題
      • とはいえコンポーネントに持たせるとその中での状態管理も大変
        • 手続き的に表示を切り替える方法
        • false/null/undefined と配列を組み合わせる方法
      • 実装も大変だしページ内がスピナーだらけになるのもつらい
  • フレームワークでの解決方法
    • React ならグローバルステートが肥大化することを許容して Redux で倒すことが多め
    • Vue.js ならあまり TS フレンドリーである必要がないので object[] | boolean で倒すこともあったり、this.$loading() みたいにすることも
    • Angular が async pipe があって非同期を同期っぽく扱えるので一番楽かも?
  • 最近のプロジェクトでの話
    • React + Apollo だと割と優秀
    • Vue.js だとディレクティブで解決することも
      • Promise の解決までは render を改変してスピナーを出すなど
      • 失敗した結果はコンポーネント内で処理する
    • vue-promised も良さそう
  • React.Suspense どうっすか

BGM & SE: 魔王魂