前言

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

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

在上面的代碼中我展示了大多數(shù)項(xiàng)目里面常用的做法，那就是：封裝一個(gè)自定義的hook(fetchData) 來(lái)處理異步請(qǐng)求的不同狀態(tài) - pending, error和success。這種做法一般情況下是沒(méi)有什么問(wèn)題的，至少比沒(méi)有封裝要好很多，可是當(dāng)我們的項(xiàng)目規(guī)模變大了以后，你會(huì)發(fā)現(xiàn)我們還是需要寫(xiě)很多模板代碼，因?yàn)槊看握{(diào)用完fetchData都需要判斷isLoading和error的值然后展示相對(duì)應(yīng)的內(nèi)容。那么有沒(méi)有一種辦法可以讓我們?cè)谀承┑胤浇y(tǒng)一處理pending和error的情況，從而我們?cè)诮M件里面只需要處理success的情況呢？答案是肯定的，本篇文章將會(huì)提供一種基于Suspense和ErrorBoundary的思路來(lái)解決這個(gè)問(wèn)題。

API介紹

在介紹具體方案之前，我們先來(lái)看看會(huì)用到的兩個(gè)組件 - Suspense和ErrorBoundary的具體用法。

Suspense

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

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

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

其實(shí)如果你有做過(guò)Code Spliting的優(yōu)化，你大概率已經(jīng)用過(guò)這個(gè)組件了，一般它會(huì)用來(lái)懶加載某個(gè)組件，例如下面的代碼:

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

Error Boundaries

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    // 使用state來(lái)保存當(dāng)前組件的錯(cuò)誤信息
    this.state = {error: null}
  }
  // 就是這個(gè)函數(shù)實(shí)現(xiàn)了error boundary的功能，用來(lái)返回錯(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
  }
}

完整方案

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

處理異步請(qǐng)求的子組件

假如我們需要實(shí)現(xiàn)一個(gè)組件，這個(gè)組件會(huì)調(diào)用一個(gè)返回隨機(jī)單詞的接口，當(dāng)結(jié)果返回后我們需要顯示返回的單詞。我們這里要調(diào)用的接口是一個(gè)公共的接口，地址是https://api.api-ninjas.com/v1/randomword，調(diào)用這個(gè)接口的一個(gè)示例返回值是:

{
  "word": "Stokesia"
}

接著我們來(lái)實(shí)現(xiàn)子組件的相關(guān)代碼:

// utils/fetchData.js
// 這個(gè)函數(shù)式是對(duì)fetch函數(shù)的封裝，它在請(qǐng)求pending和error的狀態(tài)下都會(huì)拋出異常
export const fetchData = (url) => {
  // 記錄當(dāng)前請(qǐng)求的狀態(tài)
  let status = 'pending'
  // 記錄請(qǐng)求的結(jié)果
  let response
  const promise = fetch(url)
    .then(res => res.json())
    .then(res => {
      // 請(qǐng)求成功，轉(zhuǎn)變狀態(tài)
      status = 'success'
      // 保存請(qǐng)求的結(jié)果
      response = res
    })
    .catch(error => {
      // 請(qǐng)求失敗，轉(zhuǎn)變狀態(tài)
      status = 'error'
      // 保存接口的錯(cuò)誤信息
      response = error
    })
  return () => {
    switch(status) {
      // 如果請(qǐng)求還在進(jìn)行中就拋出promise的異常，這個(gè)promise會(huì)被外層的Suspense處理
      case 'pending':
        throw promise
      // 如果請(qǐng)求出現(xiàn)錯(cuò)誤就拋出錯(cuò)誤信息，這個(gè)錯(cuò)誤信息會(huì)被外層的ErrorBoundary處理
      case 'error':
        throw response
      // 如果請(qǐng)求已經(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ù)來(lái)獲取一個(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

外層組件

編寫(xiě)完子組件的代碼后，我們?cè)賮?lái)看看外層組件(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

看到這里你可能會(huì)說(shuō)每次都需要在子組件最外層使用Suspense和ErrorBoundary組件的話感覺(jué)跟文章開(kāi)始前介紹的方案沒(méi)有很大的區(qū)別。其實(shí)不是的，這種做法和開(kāi)頭的思路的最大區(qū)別就是：這種做法可以統(tǒng)一在最外層處理所有子組件的狀態(tài)。舉個(gè)例子，你可以在路由的最外層處理所有子路由的異步請(qǐng)求狀態(tài):

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

你看當(dāng)項(xiàng)目規(guī)模變大后，這種寫(xiě)法一下子就簡(jiǎn)單很多了，因?yàn)槟阒恍枰幚硪淮萎惒秸?qǐng)求的邏輯即可！

總結(jié)

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

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

最新評(píng)論