溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下React Hooks中請求數據的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
通過這個教程，我想告訴你在 React 中如何使用 state 和 effect 這兩種 hooks 去請求數據。我們將使用眾所周知的 Hacker News API 來獲取一些熱門文章。你將定義屬于你自己的數據請求的 Hooks ，并且可以在你所有的應用中復用，也可以發布到 npm 。
如果你不了解 React 的這些新特性，可以查看我的另一篇文章 introduction to React Hooks。如果你想直接查看文章的示例，可以直接 checkout 這個 Github 倉庫。
注意：在 React 未來的版本中，Hooks 將不會用了獲取數據，取而代之的是一種叫做 Suspense 的東西。盡管如此，下面的方法依然是了解 state 和 effect 兩種 Hooks 的好方法。
使用 React Hooks 進行數據請求
如果你沒有過在 React 中進行數據請求的經驗，可以閱讀我的文章：How to fetch data in React。文章講解了如何使用 Class components 獲取數據，如何使用可重用的 Render Props Components 和 Higher Order Components ，以及如何進行錯誤處理和 loading 狀態。在本文中，我想用 Function components 和 React Hooks 來重現這一切。
import React, { useState } from 'react';
function App() {
const [data, setData] = useState({ hits: [] });
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;App 組件將展示一個列表，列表信息來自 Hacker News articles 。狀態和狀態更新函數將通過被稱為 useState 的狀態鉤子來生成，它負責管理通過請求得到的 App 組件的本地狀態。初始狀態是一個空數組，目前沒有任何地方給它設置新的狀態。
我們將使用 axios 來獲取數據，當然也可以使用你熟悉的請求庫，或者瀏覽器自帶的 fetch API。如果你還沒有安裝過 axios ，可以通過 npm install axios 進行安裝。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
});
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;我們在 useEffect 這個 effect hook 中，通過 axios 從 API 中獲取數據，并使用 state hook 的更新函數，將數據存入到本地 state 中。并且使用 async/await 來解析promise。
然而，當你運行上面的代碼的時候，你會陷入到該死的死循環中。effect hook 在組件 mount 和 update 的時候都會執行。因為我們每次獲取數據后，都會更新 state，所以組件會更新，并再次運行 effect，這會一次又一次的請求數據。很明顯我們需要避免這樣的bug產生，我們只想在組件 mount 的時候請求數據。你可以在 effect hook 提供的第二個參數中，傳入一個空數組，這樣做可以避免組件更新的時候執行 effect hook ，但是組件在 mount 依然會執行它。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;第二個參數是用來定義 hook 所以依賴的變量的。如果其中一個變量發生變化，hook 將自動運行。如果第二個參數是一個空數組，那么 hook 將不會在組件更新是運行，因為它沒有監控任何的變量。
還有一個需要特別注意的點，在代碼中，我們使用了 async/await 來獲取第三方 API 提供的數據。根據文檔，每一個 async 函數都將返回一個隱式的 promise：
"The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. "“async 函數定義了一個異步函數，它返回的是一個異步函數對象，異步函數是一個通過事件循環進行操作的函數，使用隱式的 Promise 返回最終的結果。”
然而，effect hook 應該是什么也不返回的，或者返回一個 clean up 函數的。這就是為什么你會在控制臺看到一個錯誤信息。
index.js:1452 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.
這意味著我們不能直接在 useEffect 函數使用async。讓我們來實現一個解決方案，能夠在 effect hook 中使用 async 函數。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;這就是一個使用 React Hooks 進行數據請求的小案例。但是，如果你對錯誤處理、loading 態、如何觸發表單數據獲取以及如何復用出具處理 hook 感興趣，那我們接著往下看。
如何手動或者自動觸發一個 hook？
現在我們已經能夠在組件 mount 之后獲取到數據，但是，如何使用輸入框動態告訴 API 選擇一個感興趣的話題呢？可以看到之前的代碼，我們默認將 "Redux" 作為查詢參數（'http://hn.algolia.com/api/v1/...'），但是我們怎么查詢關于 React 相關的話題呢？讓我們實現一個 input 輸入框，可以獲得除了 “Redux” 之外的其他的話題。現在，讓我們為輸入框引入一個新的 state。
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
</Fragment>
);
}
export default App;現在，請求數據和查詢參數兩個 state 相互獨立，但是我們需要像一個辦法希望他們耦合起來，只獲取輸入框輸入的參數指定的話題文章。通過以下修改，組件應該在 mount 之后按照查詢獲取相應文章。
...
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
useEffect(() => {
const fetchData = async () => {
const result = await axios(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
setData(result.data);
};
fetchData();
}, []);
return (
...
);
}
export default App;實際上，我們還缺少部分代碼。你會發現當你在輸入框輸入內容后，并沒有獲取到新的數據。這是因為 useEffect 的第二個參數只是一個空數組，此時的 effect 不依賴于任何的變量，所以這只會在 mount 只會觸發一次。但是，現在我們需要依賴查詢條件，一旦查詢發送改變，數據請求就應該再次觸發。
...
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
useEffect(() => {
const fetchData = async () => {
const result = await axios(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
setData(result.data);
};
fetchData();
}, [query]);
return (
...
);
}
export default App;好了，現在一旦你改變輸入框內容，數據就會重新獲取。但是現在又要另外一個問題：每次輸入一個新字符，就會觸發 effect 進行一次新的請求。那么我們提供一個按鈕來手動觸發數據請求呢？
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
const [search, setSearch] = useState('redux');
useEffect(() => {
const fetchData = async () => {
const result = await axios(
`http://hn.algolia.com/api/v1/search?query=${search}`,
);
setData(result.data);
};
fetchData();
}, [search]);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="button" onClick={() => setSearch(query)}>
Search
</button>
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
</Fragment>
);
}此外，search state 的初始狀態也是設置成了與 query state 相同的狀態，因為組件在 mount 的時候會請求一次數據，此時的結果也應該是反應的是輸入框中的搜索條件。然而， search state 和 query state 具有類似的值，這看起來比較困惑。為什么不將真實的 URL 設置到 search state 中呢？
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
useEffect(() => {
const fetchData = async () => {
const result = await axios(url);
setData(result.data);
};
fetchData();
}, [url]);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button
type="button"
onClick={() =>
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
}
>
Search
</button>
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
</Fragment>
);
}這就是通過 effect hook 獲取數據的案例，你可以決定 effect 取決于哪個 state。在這個案例中，如果 URL 的 state 發生改變，則再次
運行該 effect 通過 API 重新獲取主題文章。
Loading 態 與 React Hooks
讓我們在數據的加載過程中引入一個 Loading 狀態。它只是另一個由 state hook 管理的狀態。Loading state 用于在 App 組件中呈現 Loading 狀態。
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
const result = await axios(url);
setData(result.data);
setIsLoading(false);
};
fetchData();
}, [url]);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button
type="button"
onClick={() =>
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
}
>
Search
</button>
{isLoading ? (
<p>Loading ...</p>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
</Fragment>
);
}
export default App;現在當組件處于 mount 狀態或者 URL state 被修改時，調用 effect 獲取數據，Loading 狀態就會變成 true。一旦請求完成，Loading 狀態就會再次被設置為 false。
錯誤處理與 React Hooks
通過 React Hooks 進行數據請求時，如何進行錯誤處理呢？ 錯誤只是另一個使用 state hook 初始化的另一種狀態。一旦出現錯誤狀態，App 組件就可以反饋給用戶。當使用 async/await 函數時，通常使用 try/catch 來進行錯誤捕獲，你可以在 effect 中進行下面操作：
...
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return (
<Fragment>
...
{isError && <p>Something went wrong ...</p>}
...
<Fragment>
);effect 每次運行都會重置 error state 的狀態，這很有用，因為每次請求失敗后，用戶可能重新嘗試，這樣就能夠重置錯誤。為了觀察代
碼是否生效，你可以填寫一個無用的 URL ，然后檢查錯誤信息是否會出現。
使用表單進行數據獲取
什么才是獲取數據的正確形式呢？現在我們只有輸入框和按鈕進行組合，一旦引入更多的 input 元素，你可能想要使用表單來進行包裝。此外表單還能夠觸發鍵盤的 “Enter” 事件。
function App() {
...
const doFetch = (evt) => {
evt.preventDefault();
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
}
return (
<Fragment>
<form
onSubmit={ doFetch }
>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
{isError && <p>Something went wrong ...</p>}
...
</Fragment>
);
}自定義 hook 獲取數據
我們可以定義一個自定義的 hook，提取出所有與數據請求相關的東西，除了輸入框的 query state，除此之外還有 Loading 狀態、錯誤處理。還要確保返回組件中需要用到的變量。
const useHackerNewsApi = () => {
const [data, setData] = useState({ hits: [] });
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
const doFetch = () => {
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
};
return { data, isLoading, isError, doFetch };
}現在，我們在 App 組件中使用我們的新 hook 。
function App() {
const [query, setQuery] = useState('redux');
const { data, isLoading, isError, doFetch } = useHackerNewsApi();
return (
<Fragment>
...
</Fragment>
);
}接下來，在外部傳遞 URL 給 DoFetch 方法。
const useHackerNewsApi = () => {
...
useEffect(
...
);
const doFetch = url => {
setUrl(url);
};
return { data, isLoading, isError, doFetch };
};
function App() {
const [query, setQuery] = useState('redux');
const { data, isLoading, isError, doFetch } = useHackerNewsApi();
return (
<Fragment>
<form
onSubmit={event => {
doFetch(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
event.preventDefault();
}}
>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
...
</Fragment>
);
}初始的 state 也是通用的，可以通過參數簡單的傳遞到自定義的 hook 中：
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
const useDataApi = (initialUrl, initialData) => {
const [data, setData] = useState(initialData);
const [url, setUrl] = useState(initialUrl);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
const doFetch = url => {
setUrl(url);
};
return { data, isLoading, isError, doFetch };
};
function App() {
const [query, setQuery] = useState('redux');
const { data, isLoading, isError, doFetch } = useDataApi(
'http://hn.algolia.com/api/v1/search?query=redux',
{ hits: [] },
);
return (
<Fragment>
<form
onSubmit={event => {
doFetch(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
event.preventDefault();
}}
>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
{isError && <p>Something went wrong ...</p>}
{isLoading ? (
<p>Loading ...</p>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
</Fragment>
);
}
export default App;這就是使用自定義 hook 獲取數據的方法，hook 本身對API一無所知，它從外部獲取參數，只管理必要的 state ，如數據、 Loading 和
錯誤相關的 state ，并且執行請求并將數據通過 hook 返回給組件。
用于數據獲取的 Reducer Hook
目前為止，我們已經使用 state hooks 來管理了我們獲取到的數據數據、Loading 狀態、錯誤狀態。然而，所有的狀態都有屬于自己的 state hook，但是他們又都連接在一起，關心的是同樣的事情。如你所見，所有的它們都在數據獲取函數中被使用。它們一個接一個的被調用（比如：setIsError、setIsLoading），這才是將它們連接在一起的正確用法。讓我們用一個 Reducer Hook 將這三者連接在一起。
Reducer Hook 返回一個 state 對象和一個函數（用來改變 state 對象）。這個函數被稱為分發函數（dispatch function），它分發一個 action，action 具有 type 和 payload 兩個屬性。所有的這些信息都在 reducer 函數中被接收，根據之前的狀態提取一個新的狀態。讓我們看看在代碼中是如何工作的：
import React, {
Fragment,
useState,
useEffect,
useReducer,
} from 'react';
import axios from 'axios';
const dataFetchReducer = (state, action) => {
...
};
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
...
};Reducer Hook 以 reducer 函數和一個初始狀態對象作為參數。在我們的案例中，加載的數據、Loading 狀態、錯誤狀態都是作為初始狀態參數，且不會發生改變，但是他們被聚合到一個狀態對象中，由 reducer hook 管理，而不是單個 state hooks。
const dataFetchReducer = (state, action) => {
...
};
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
const result = await axios(url);
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
} catch (error) {
dispatch({ type: 'FETCH_FAILURE' });
}
};
fetchData();
}, [url]);
...
};現在，在獲取數據時，可以使用 dispatch 函數向 reducer 函數發送信息。使用 dispatch 函數發送的對象具有一個必填的 type 屬性和一個可選的 payload 屬性。type 屬性告訴 reducer 函數需要轉換的 state 是哪個，還可以從 payload 中提取新的 state。在這里只有三個狀態轉換：初始化數據過程，通知數據請求成功的結果，以及通知數據請求失敗的結果。
在自定義 hook 的末尾，state 像以前一樣返回，但是因為我們所有的 state 都在一個對象中，而不再是獨立的 state ，所以 state 對象進行解構返回。這樣，調用 useDataApi 自定義 hook 的人仍然可以 data 、isLoading和isError:
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
...
const doFetch = url => {
setUrl(url);
};
return { ...state, doFetch };
};最后我們還缺少 reducer 函數的實現。它需要處理三個不同的狀態轉換，分被稱為 FEATCH_INIT、FEATCH_SUCCESS、FEATCH_FAILURE。每個狀態轉換都需要返回一個新的狀態。讓我們看看使用 switch case 如何實現這個邏輯：
const dataFetchReducer = (state, action) => {
switch (action.type) {
case 'FETCH_INIT':
return { ...state };
case 'FETCH_SUCCESS':
return { ...state };
case 'FETCH_FAILURE':
return { ...state };
default:
throw new Error();
}
};reducer 函數可以通過其參數訪問當前狀態和 dispatch 傳入的 action。到目前為止，在 switch case 語句中，每個狀態轉換只返回前一個狀態，析構語句用于保持 state 對象不可變(即狀態永遠不會被直接更改)。現在讓我們重寫一些當前 state 返回的屬性，以便在每次轉換時更改 一些 state:
const dataFetchReducer = (state, action) => {
switch (action.type) {
case 'FETCH_INIT':
return {
...state,
isLoading: true,
isError: false
};
case 'FETCH_SUCCESS':
return {
...state,
isLoading: false,
isError: false,
data: action.payload,
};
case 'FETCH_FAILURE':
return {
...state,
isLoading: false,
isError: true,
};
default:
throw new Error();
}
};現在，每個狀態轉換（action.type決定）都返回一個基于先前 state 和可選 payload 的新狀態。例如，在請求成功的情況下，payload 用于設置新 state 對象的 data 屬性。
總之，reducer hook 確保使用自己的邏輯封裝狀態管理的這一部分。通過提供 action type 和可選 payload ，總是會得到可預測的狀態更改。此外，永遠不會遇到無效狀態。例如，以前可能會意外地將 isLoading 和 isError 設置為true。在這種情況下，UI中應該顯示什么？ 現在，由 reducer 函數定義的每個 state 轉換都指向一個有效的 state 對象。
在 Effect Hook 中中斷數據請求
在React中，即使組件已經卸載，組件 state 仍然會被被賦值，這是一個常見的問題。我在之前的文章中寫過這個問題，它描述了如何防止在各種場景中為未掛載組件設置狀態。讓我們看看在自定義 hook 中，請求數據時如何防止設置狀態：
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
let didCancel = false;
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
const result = await axios(url);
if (!didCancel) {
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
}
} catch (error) {
if (!didCancel) {
dispatch({ type: 'FETCH_FAILURE' });
}
}
};
fetchData();
return () => {
didCancel = true;
};
}, [url]);
const doFetch = url => {
setUrl(url);
};
return { ...state, doFetch };
};每個Effect Hook都帶有一個clean up函數，它在組件卸載時運行。clean up 函數是 hook 返回的一個函數。在該案例中，我們使用 didCancel 變量來讓 fetchData 知道組件的狀態(掛載/卸載)。如果組件確實被卸載了，則應該將標志設置為 true，從而防止在最終異步解析數據獲取之后設置組件狀態。
注意：實際上并沒有中止數據獲取（不過可以通過Axios取消來實現），但是不再為卸載的組件執行狀態轉換。由于 Axios 取消在我看來并不是最好的API，所以這個防止設置狀態的布爾標志也可以完成這項工作。
以上是React Hooks中請求數據的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
