zoukankan      html  css  js  c++  java
  • [React] Write a generic React Suspense Resource factory

    Using Suspense within our component isn't exactly ergonomic. Let's put all that logic into a reusable function so we can create resources anytime we need them and for any asynchronous interaction in our app.

    In previous post, https://www.cnblogs.com/Answer1215/p/12006526.html, we have see how to use React.Suspense to handle data fetching, with fallback and ErrorBoundary. 

    In this post, we will refactor code to make a generic function to handle all use cases.

    function createFetch(fetchFn) {
      let status = 'pending'
      let result
      let error
      let promise = fetchFn().then(
        p => {
          console.log('promise resolve')
          status = 'success'
          result = p
        },
        e => {
          status = 'error'
          error = e
        },
      )
    
      return {
        read() {
          if (status === 'error') {
            throw error
          }
    
          if (status === 'pending') {
            throw promise // this API might change
          }
    
          if (status === 'success') {
            return result
          }
        },
      }
    }

    Use:

    const promise = createFetch(() => fetchPokemon('pikachu'))
    
    function PokemonInfo() {
      console.log('PokemonInfo init')
    
      const pokemon = promise.read()
    
      return (
        <div>
          <div className="pokemon-info__img-wrapper">
            <img src={pokemon.image} alt={pokemon.name} />
          </div>
          <PokemonDataView pokemon={pokemon} />
        </div>
      )
    }
  • 相关阅读:
    【宁夏区域赛】G.Pot!
    【C#】上机实验二
    【C#】上机实验三
    Luogu P1437 敲砖块
    Luogu P1463 反素数
    Luogu P1445 樱花
    GHOJ 926 小X的AK计划
    【题解】Beads
    【题解】Antisymmetry
    【题解】A Horrible Poem
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12006589.html
Copyright © 2011-2022 走看看