第React組件如何優(yōu)雅地處理異步數(shù)據(jù)詳解目錄前言API介紹SuspenseErrorBoundaries完整方案處理異步請(qǐng)求的子組件外層組件總結(jié)

前言

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

constAsyncComponent=()={

const[data,isLoading,error]=fetchData('./someapi')

if(isLoading){

returnLoading/

if(error){

returnErrorerror={error}/

returnDisplayData

data={data}

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

API介紹

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

Suspense

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

import{Suspense}from'react'

Suspensefallback={Loading/}

SomeComponent/

/Suspense

在上面的代碼中當(dāng)SomeComponent處于pending狀態(tài)時(shí)，Suspense會(huì)展示Loading組件。看到這里你可能會(huì)問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í)如果你有做過CodeSpliting的優(yōu)化，你大概率已經(jīng)用過這個(gè)組件了，一般它會(huì)用來(lái)懶加載某個(gè)組件，例如下面的代碼:

import{lazy,Suspense}from'react'

constLazyComponent=lazy(()=import('./component'))

Suspensefallback={Loading/}

LazyComponent/

Suspense

ErrorBoundaries

ErrorBoundaries也是React16引入進(jìn)來(lái)的概念。它的引入是為了解決某個(gè)組件發(fā)生錯(cuò)誤的時(shí)候整個(gè)頁(yè)面crash的情況(白屏)。有了ErrorBoundaries這個(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è)常見的ErrorBoundary組件的實(shí)現(xiàn):

classErrorBoundaryextendsReact.Component{

constructor(props){

super(props)

//使用state來(lái)保存當(dāng)前組件的錯(cuò)誤信息

this.state={error:null}

//就是這個(gè)函數(shù)實(shí)現(xiàn)了errorboundary的功能，用來(lái)返回錯(cuò)誤出現(xiàn)后的state

staticgetDerivedStateFromError(error){

return{error}

render(){

//如果組件發(fā)生了錯(cuò)誤那么就展示錯(cuò)誤的信息否則渲染子組件的內(nèi)容

if(this.state.error){

returndiverroroccur/div

returnps.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)。Talkischeap,showmethecode。我們來(lái)看一下具體的代碼實(shí)現(xiàn):

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

假如我們需要實(shí)現(xiàn)一個(gè)組件，這個(gè)組件會(huì)調(diào)用一個(gè)返回隨機(jī)單詞的接口，當(dāng)結(jié)果返回后我們需要顯示返回的單詞。我們這里要調(diào)用的接口是一個(gè)公共的接口，地址是/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ì)拋出異常

exportconstfetchData=(url)={

//記錄當(dāng)前請(qǐng)求的狀態(tài)

letstatus='pending'

//記錄請(qǐng)求的結(jié)果

letresponse

constpromise=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':

throwpromise

//如果請(qǐng)求出現(xiàn)錯(cuò)誤就拋出錯(cuò)誤信息，這個(gè)錯(cuò)誤信息會(huì)被外層的ErrorBoundary處理

case'error':

throwresponse

//如果請(qǐng)求已經(jīng)完成，就直接返回?cái)?shù)據(jù)

case'success':

returnresponse

default:

thrownewError('unexpectedstatus')

//RandomWord.jsx

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

//調(diào)用上面的fetchData函數(shù)來(lái)獲取一個(gè)包裝完畢的fetch函數(shù)

constrandomWordFetch=fetchData('/v1/randomword')

constRandomWord=()={

constresponse=randomWordFetch()

//如果代碼能執(zhí)行到這里就表示接口已經(jīng)調(diào)用成功并且返回了

constword=response.word

returndiv

{word}

/div

exportdefaultRandomWord

外層組件

編寫完子組件的代碼后，我們?cè)賮?lái)看看外層組件(App)的代碼:

//App.jsx

importErrorBoundaryfrom"./ErrorBoundary"

importRandomWordfrom"./RandomWord"

import{Suspense}from'react'

functionApp(){

return(

ErrorBoundary

Suspensefallback={divloading.../div}

RandomWord/

/Suspense

/ErrorBoundary

exportdefaultApp

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

ErrorBoundary

Suspensefallback={Loading/}

Switch

Routepath='/a'component={ComponentA}/

Routepath='/b'component={ComponentB}/

/Switch

/Suspense

/ErrorBoundary

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

總結(jié)

上面的代碼只是給大家說(shuō)了一個(gè)使用S