React组件如何优雅地处理异步数据详解

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

import { Suspense } from 'react'
<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

import { lazy, Suspense } from 'react'
const LazyComponent = lazy(() => import('./component'))
<Suspense fallback={<Loading />}>
  <LazyComponent />
<Suspense>

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
  }
}

{
  "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.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

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