Cómo los componentes de React manejan correctamente los datos asíncronos

prefacio

Cuando escribimos aplicaciones React , a menudo necesitamos obtener datos de forma asíncrona en componentes . Debido a que una solicitud asíncrona tarda una cierta cantidad de tiempo en finalizar, generalmente le mostramos al usuario un estado de carga antes de que finalice la solicitud para una mejor experiencia del usuario, y luego, si ocurre un error, el motivo del error se mostrará en la página, solo cuando finaliza la solicitud y no hay errores, entregamos los datos finales. Este requisito es muy común.Si su código está bien , su lógica de procesamiento probablemente sea así:

const AsyncComponent = () => {
    const [data, isLoading, error] = fetchData('./someapi')
    if (isLoading) {
      return <Loading />
    }
    if (error) {
      return <Error error={error} />
    }
    
    return <DisplayData
        data={data}
    />
}
复制代码

在上面的代码中我展示了大多数项目里面常用的做法，那就是：封装一个自定义的hook(fetchData) 来处理异步请求的不同状态 - pending, error和success。这种做法一般情况下是没有什么问题的，至少比没有封装要好很多，可是当我们的项目规模变大了以后，你会发现我们还是需要写很多模板代码，因为每次调用完fetchData都需要判断isLoading和error的值然后展示相对应的内容。那么有没有一种办法可以让我们在某些地方统一处理pending和error的情况，从而我们在组件里面只需要处理success的情况呢？答案是肯定的，本篇文章将会提供一种基于Suspense和ErrorBoundary的思路来解决这个问题。

API介绍

在介绍具体方案之前，我们先来看看会用到的两个组件 - Suspense和ErrorBoundary的具体用法。

Suspense

React 16.6引入了Suspense组件，这个组件会在其子组件还处于pending状态时展示一个fallback的效果，例如:

import { Suspense } from 'react'

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>
复制代码

在上面的代码中当SomeComponent处于pending状态时，Suspense会展示Loading组件。看到这里你可能会问Suspense组件是怎么知道SomeComponent处于pending状态的呢？它的原理简单来说就是这个组件会捕获子组件抛出来的异常，如果这个异常是一个promise，而且这个promise是pending状态的它就显示fallback的内容否则就渲染其子组件。

其实如果你有做过Code Spliting的优化，你大概率已经用过这个组件了，一般它会用来懒加载某个组件，例如下面的代码:

import { lazy, Suspense } from 'react'

const LazyComponent = lazy(() => import('./component'))

<Suspense fallback={<Loading />}>
  <LazyComponent />
<Suspense>
复制代码

Error Boundaries

Error Boundaries也是React 16引入进来的概念。它的引入是为了解决某个组件发生错误的时候整个页面crash的情况(白屏)。有了Error Boundaries这个功能后，你可以实现一个ErrorBoundary组件，这个组件可以捕获到从子组件抛出来的错误，然后你就可以对这个错误进行自定义的处理从而防止这个错误直接传递到应用的最外层导致整个应用的奔溃。以下是一个常见的ErrorBoundary组件的实现:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    // 使用state来保存当前组件的错误信息
    this.state = {error: null}
  }

  // 就是这个函数实现了error boundary的功能，用来返回错误出现后的state
  static getDerivedStateFromError(error) {
    return { error }
  }

  render() {
    // 如果组件发生了错误那么就展示错误的信息否则渲染子组件的内容
    if (this.state.error) {
      return <div>error occur</div>
    }

    return this.props.children
  }
}
复制代码

完整方案

在介绍完我们需要用到的两个组件Suspense和ErrorBoundary后，我们终于可以来看一下实际的方案了。我们的方案很简单，总的来说就是：在需要处理异步请求的组件外面包裹一层Suspense组件和ErrorBoundary组件，其中Suspense组件处理异步请求的pending状态，而ErrorBoundary处理请求的error状态。Talk is cheap, show me the code。我们来看一下具体的代码实现:

处理异步请求的子组件

假如我们需要实现一个组件，这个组件会调用一个返回随机单词的接口，当结果返回后我们需要显示返回的单词。我们这里要调用的接口是一个公共的接口，地址是https://api.api-ninjas.com/v1/randomword，调用这个接口的一个示例返回值是:

{
  "word": "Stokesia"
}
复制代码

接着我们来实现子组件的相关代码:

// utils/fetchData.js

// 这个函数式是对fetch函数的封装，它在请求pending和error的状态下都会抛出异常
export const fetchData = (url) => {
  // 记录当前请求的状态
  let status = 'pending'
  // 记录请求的结果
  let response

  const promise = fetch(url)
    .then(res => res.json())
    .then(res => {
      // 请求成功，转变状态
      status = 'success'
      // 保存请求的结果
      response = res
    })
    .catch(error => {
      // 请求失败，转变状态
      status = 'error'
      // 保存接口的错误信息
      response = error
    })

  return () => {
    switch(status) {
      // 如果请求还在进行中就抛出promise的异常，这个promise会被外层的Suspense处理
      case 'pending':
        throw promise
      // 如果请求出现错误就抛出错误信息，这个错误信息会被外层的ErrorBoundary处理
      case 'error':
        throw response
      // 如果请求已经完成，就直接返回数据
      case 'success':
        return response
      default:
        throw new Error('unexpected status')
    }
  }
}

// RandomWord.jsx
import { fetchData } from './utils/fetchData'

// 调用上面的fetchData函数来获取一个包装完毕的fetch函数
const randomWordFetch = fetchData('https://api.api-ninjas.com/v1/randomword')

const RandomWord = () => {
  const response = randomWordFetch()
  // 如果代码能执行到这里就表示接口已经调用成功并且返回了
  const word = response.word

  return <div>
    {word}
  </div>
}

export default RandomWord
复制代码

外层组件

编写完子组件的代码后，我们再来看看外层组件(App)的代码:

// App.jsx

import ErrorBoundary from "./ErrorBoundary"
import RandomWord from "./RandomWord"
import {Suspense} from 'react'

function App() {
  return (
   <ErrorBoundary>
    <Suspense fallback={<div>loading...</div>}>
      <RandomWord />
    </Suspense>
   </ErrorBoundary>
  )
}

export default App
复制代码

看到这里你可能会说每次都需要在子组件最外层使用Suspense和ErrorBoundary组件的话感觉跟文章开始前介绍的方案没有很大的区别。其实不是的，这种做法和开头的思路的最大区别就是：这种做法可以统一在最外层处理所有子组件的状态。举个例子，你可以在路由的最外层处理所有子路由的异步请求状态:

<ErrorBoundary>
  <Suspense fallback={<Loading />}>
    <Switch>
      <Route path='/a' component={ComponentA} />
      <Route path='/b' component={ComponentB} />
      ...
    </Switch>
  </Suspense>
</ErrorBoundary>
复制代码

你看当项目规模变大后，这种写法一下子就简单很多了，因为你只需要处理一次异步请求的逻辑即可！

总结

上面的代码只是给大家说了一个使用Suspense和ErrorBoundary组件来优雅地处理异步请求的大概思路，单纯从实现上看还有很多不完善的地方，例如子组件对fetchData的调用放在了组件定义之外，这个做法是不够完善的，更好的做法是在组件内部使用useMemo来缓存对某个请求的调用，由于文章篇幅的限制我在这里就不再论述了，感兴趣的同学可以在项目里面自己实践一下。

个人技术动态

创作不易，如果你从这篇文章中学到东西，请给我点一下赞或者关注，你的支持是我继续创作的最大动力！

同时欢迎关注公众号进击的大葱一起学习成长