React組件如何優(yōu)雅地處理異步數(shù)據(jù)詳解

更新時間：2022年10月17日 14:33:05 作者：進擊的大蔥

這篇文章主要為大家介紹了React組件如何優(yōu)雅地處理異步數(shù)據(jù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

我們在編寫React應用的時候，常常需要在組件里面異步獲取數(shù)據(jù)。因為異步請求是需要一定時間才能結束的，通常我們?yōu)榱烁玫挠脩趔w驗會在請求還沒有結束前給用戶展示一個loading的狀態(tài)，然后如果發(fā)生了錯誤還要在頁面上面展示錯誤的原因，只有當請求結束并且沒有錯誤的情況下，我們才渲染出最終的數(shù)據(jù)。這個需求十分常見，如果你的代碼封裝得比較好的話，你的處理邏輯大概是這樣的:

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

在上面的代碼中我展示了大多數(shù)項目里面常用的做法，那就是：封裝一個自定義的hook(fetchData) 來處理異步請求的不同狀態(tài) - pending, error和success。這種做法一般情況下是沒有什么問題的，至少比沒有封裝要好很多，可是當我們的項目規(guī)模變大了以后，你會發(fā)現(xiàn)我們還是需要寫很多模板代碼，因為每次調用完fetchData都需要判斷isLoading和error的值然后展示相對應的內容。那么有沒有一種辦法可以讓我們在某些地方統(tǒng)一處理pending和error的情況，從而我們在組件里面只需要處理success的情況呢？答案是肯定的，本篇文章將會提供一種基于Suspense和ErrorBoundary的思路來解決這個問題。

API介紹

在介紹具體方案之前，我們先來看看會用到的兩個組件 - Suspense和ErrorBoundary的具體用法。

Suspense

React 16.6引入了Suspense組件，這個組件會在其子組件還處于pending狀態(tài)時展示一個fallback的效果，例如:

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

在上面的代碼中當SomeComponent處于pending狀態(tài)時，Suspense會展示Loading組件。看到這里你可能會問Suspense組件是怎么知道SomeComponent處于pending狀態(tài)的呢？它的原理簡單來說就是這個組件會捕獲子組件拋出來的異常，如果這個異常是一個promise，而且這個promise是pending狀態(tài)的它就顯示fallback的內容否則就渲染其子組件。

其實如果你有做過Code Spliting的優(yōu)化，你大概率已經用過這個組件了，一般它會用來懶加載某個組件，例如下面的代碼:

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

Error Boundaries

Error Boundaries也是React 16引入進來的概念。它的引入是為了解決某個組件發(fā)生錯誤的時候整個頁面crash的情況(白屏)。有了Error Boundaries這個功能后，你可以實現(xiàn)一個ErrorBoundary組件，這個組件可以捕獲到從子組件拋出來的錯誤，然后你就可以對這個錯誤進行自定義的處理從而防止這個錯誤直接傳遞到應用的最外層導致整個應用的奔潰。以下是一個常見的ErrorBoundary組件的實現(xiàn):

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    // 使用state來保存當前組件的錯誤信息
    this.state = {error: null}
  }
  // 就是這個函數(shù)實現(xiàn)了error boundary的功能，用來返回錯誤出現(xiàn)后的state
  static getDerivedStateFromError(error) {
    return { error }
  }
  render() {
    // 如果組件發(fā)生了錯誤那么就展示錯誤的信息否則渲染子組件的內容
    if (this.state.error) {
      return <div>error occur</div>
    }
    return this.props.children
  }
}

完整方案

在介紹完我們需要用到的兩個組件Suspense和ErrorBoundary后，我們終于可以來看一下實際的方案了。我們的方案很簡單，總的來說就是：在需要處理異步請求的組件外面包裹一層Suspense組件和ErrorBoundary組件，其中Suspense組件處理異步請求的pending狀態(tài)，而ErrorBoundary處理請求的error狀態(tài)。Talk is cheap, show me the code。我們來看一下具體的代碼實現(xiàn):

處理異步請求的子組件

假如我們需要實現(xiàn)一個組件，這個組件會調用一個返回隨機單詞的接口，當結果返回后我們需要顯示返回的單詞。我們這里要調用的接口是一個公共的接口，地址是https://api.api-ninjas.com/v1/randomword，調用這個接口的一個示例返回值是:

{
  "word": "Stokesia"
}

接著我們來實現(xiàn)子組件的相關代碼:

// utils/fetchData.js
// 這個函數(shù)式是對fetch函數(shù)的封裝，它在請求pending和error的狀態(tài)下都會拋出異常
export const fetchData = (url) => {
  // 記錄當前請求的狀態(tài)
  let status = 'pending'
  // 記錄請求的結果
  let response
  const promise = fetch(url)
    .then(res => res.json())
    .then(res => {
      // 請求成功，轉變狀態(tài)
      status = 'success'
      // 保存請求的結果
      response = res
    })
    .catch(error => {
      // 請求失敗，轉變狀態(tài)
      status = 'error'
      // 保存接口的錯誤信息
      response = error
    })
  return () => {
    switch(status) {
      // 如果請求還在進行中就拋出promise的異常，這個promise會被外層的Suspense處理
      case 'pending':
        throw promise
      // 如果請求出現(xiàn)錯誤就拋出錯誤信息，這個錯誤信息會被外層的ErrorBoundary處理
      case 'error':
        throw response
      // 如果請求已經完成，就直接返回數(shù)據(jù)
      case 'success':
        return response
      default:
        throw new Error('unexpected status')
    }
  }
}
// RandomWord.jsx
import { fetchData } from './utils/fetchData'
// 調用上面的fetchData函數(shù)來獲取一個包裝完畢的fetch函數(shù)
const randomWordFetch = fetchData('https://api.api-ninjas.com/v1/randomword')
const RandomWord = () => {
  const response = randomWordFetch()
  // 如果代碼能執(zhí)行到這里就表示接口已經調用成功并且返回了
  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組件的話感覺跟文章開始前介紹的方案沒有很大的區(qū)別。其實不是的，這種做法和開頭的思路的最大區(qū)別就是：這種做法可以統(tǒng)一在最外層處理所有子組件的狀態(tài)。舉個例子，你可以在路由的最外層處理所有子路由的異步請求狀態(tài):

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

你看當項目規(guī)模變大后，這種寫法一下子就簡單很多了，因為你只需要處理一次異步請求的邏輯即可！

總結

上面的代碼只是給大家說了一個使用Suspense和ErrorBoundary組件來優(yōu)雅地處理異步請求的大概思路，單純從實現(xiàn)上看還有很多不完善的地方，例如子組件對fetchData的調用放在了組件定義之外，這個做法是不夠完善的，更好的做法是在組件內部使用useMemo來緩存對某個請求的調用，由于文章篇幅的限制我在這里就不再論述了，感興趣的同學可以在項目里面自己實踐一下。

以上就是React組件如何優(yōu)雅地處理異步數(shù)據(jù)的詳細內容，更多關于React處理異步數(shù)據(jù)的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: