該教程展示了使用react-async庫在反應(yīng)應(yīng)用中提取的有效數(shù)據(jù)，並提供了簡化的傳統(tǒng)axios或fetch方法的替代方案。 react-async沒有手動管理加載狀態(tài)和錯誤處理，而是簡化了該過程。

數(shù)據(jù)獲取的標(biāo)準(zhǔn)方法涉及進(jìn)行API調(diào)用，通過響應(yīng)（或顯示錯誤消息）更新狀態(tài)，並將加載指標(biāo)合併以管理網(wǎng)絡(luò)延遲。 react-async優(yōu)雅地處理了所有這些方面。

我們將使用組件，鉤子和幫助者探索三個示例，以說明數(shù)據(jù)請求期間的加載狀態(tài)實(shí)現(xiàn)。本教程使用Create React應(yīng)用程序。首先創(chuàng)建一個項(xiàng)目：

 npx create-react-app react-assync-demo

接下來，安裝react-async ：

 ＃紗
紗線添加反應(yīng)

＃npm
npm安裝react-assnc-保存

示例1：組件中的裝載機(jī)

這<async></async>組件直接集成到JSX：

從“反應(yīng)”中導(dǎo)入反應(yīng)；
導(dǎo)入'./app.css';
從“ react-assync”導(dǎo)入異步；

const loadusers =（）=>
  fetch（“ https://jsonplaceholder.typicode.com/users”）
    。
    然後（res => res.json（））;

功能應(yīng)用程序（）{
  返回 （
    <div classname="container">
      <async promisefn="{loadUsers}">
        {（{data，err，isloading}）=> {
          如果（isloading）返回“加載...”；
          if（err）返回`錯誤：$ {err.message}`;
          如果（數(shù)據(jù)）
            返回 （
              <div>
                <h2>REACT HASYNC-用戶數(shù)據(jù)</h2>
                {data.map（用戶=>（（
                  <div classname="row" key="{user.id}">
                    <div classname="col-md-12">
                      <p>{使用者名稱}</p>
                      <p>{user.email}</p>
                    </div>
                  </div>
                ）}}
              </div>
            ）；
        }}}
      </async>
    </div>
  ）；
}

導(dǎo)出默認(rèn)應(yīng)用；

Async組件提供isLoading ， err （或error ）和data道具。該組件根據(jù)這些道具呈現(xiàn)不同的內(nèi)容。

示例2：帶鉤子的裝載機(jī)

對於掛鉤愛好者， useAsync提供了類似的功能：

從“反應(yīng)”中導(dǎo)入反應(yīng)；
導(dǎo)入'./app.css';
從'react-assync'導(dǎo)入{useasync};

const loadusers = async（）=>
  等待提取（“ https://jsonplaceholder.typicode.com/users”）
    。
    然後（res => res.json（））;

功能應(yīng)用程序（）{
  const {data，error，isloading} = useAsync（{promistfn：loadusers}）;
  如果（isloading）返回“加載...”；
  如果（錯誤）返回錯誤：$ {error.message}`;
  如果（數(shù)據(jù)）
    返回 （
      // ...（與示例1相同的渲染）...
    ）；
}

導(dǎo)出默認(rèn)應(yīng)用；

useAsync返回相同的isLoading ， error和data值，簡化了狀態(tài)管理。

示例3：帶幫助者的裝載機(jī)

助手組件增強(qiáng)代碼可讀性：

從“反應(yīng)”中導(dǎo)入反應(yīng)；
導(dǎo)入'./app.css';
從“ react-assync”導(dǎo)入異步；

const loadusers =（）=>
  // ...（相同的獲取函數(shù)與示例1）...

功能應(yīng)用程序（）{
  返回 （
    <div classname="container">
      <async promisefn="{loadUsers}">
        <async.loading>載入中...</async.loading>
        <async.fulfilled>
          {data =>（（
            // ...（與示例1相同的渲染）...
          ）
        </async.fulfilled>
        <async.rejected>
          {error =>`錯誤：$ {error.message}`}
        </async.rejected>
      </async>
    </div>
  ）；
}

導(dǎo)出默認(rèn)應(yīng)用；

這種方法使用<async.loading></async.loading>，，，，<async.fulfilled></async.fulfilled> ， 和<async.rejected></async.rejected>為了更清晰地分離加載，成功和錯誤狀態(tài)。

結(jié)論

react-async簡化了React中的數(shù)據(jù)獲取，簡化了加載狀態(tài)管理和錯誤處理。選擇最適合您的編碼樣式的方法（組件，鉤子或助手）。這些示例的源代碼可以在GitHub上找到（如果有的話，請?zhí)峁╂溄樱?/p>

以上是使用React async獲取React中的數(shù)據(jù)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！