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來保存當(dāng)前組件的錯(cuò)誤信息
    this.state = {error: null}
  }
  // 就是這個(gè)函數(shù)實(shí)現(xiàn)了error boundary的功能，用來返回錯(cuò)誤出現(xiàn)后的state
  static getDerivedStateFromError(error) {
    return { error }
  }
  render() {
    // 如果組件發(fā)生了錯(cuò)誤那么就展示錯(cuò)誤的信息否則渲染子組件的內(nèi)容
    if (this.state.error) {
      return <div>error occur</div>
    }
    return this.props.children
  }
}

{
  "word": "Stokesia"
}

// utils/fetchData.js
// 這個(gè)函數(shù)式是對fetch函數(shù)的封裝，它在請求pending和error的狀態(tài)下都會(huì)拋出異常
export const fetchData = (url) => {
  // 記錄當(dāng)前請求的狀態(tài)
  let status = 'pending'
  // 記錄請求的結(jié)果
  let response
  const promise = fetch(url)
    .then(res => res.json())
    .then(res => {
      // 請求成功，轉(zhuǎn)變狀態(tài)
      status = 'success'
      // 保存請求的結(jié)果
      response = res
    })
    .catch(error => {
      // 請求失敗，轉(zhuǎn)變狀態(tài)
      status = 'error'
      // 保存接口的錯(cuò)誤信息
      response = error
    })
  return () => {
    switch(status) {
      // 如果請求還在進(jìn)行中就拋出promise的異常，這個(gè)promise會(huì)被外層的Suspense處理
      case 'pending':
        throw promise
      // 如果請求出現(xiàn)錯(cuò)誤就拋出錯(cuò)誤信息，這個(gè)錯(cuò)誤信息會(huì)被外層的ErrorBoundary處理
      case 'error':
        throw response
      // 如果請求已經(jīng)完成，就直接返回?cái)?shù)據(jù)
      case 'success':
        return response
      default:
        throw new Error('unexpected status')
    }
  }
}
// RandomWord.jsx
import { fetchData } from './utils/fetchData'
// 調(diào)用上面的fetchData函數(shù)來獲取一個(gè)包裝完畢的fetch函數(shù)
const randomWordFetch = fetchData('https://api.api-ninjas.com/v1/randomword')
const RandomWord = () => {
  const response = randomWordFetch()
  // 如果代碼能執(zhí)行到這里就表示接口已經(jīng)調(diào)用成功并且返回了
  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>