常规请求

  1. import React, { useState, useEffect } from "react";
  2. import axios from "axios";
  4. function App() {
  5.   const [data, setData] = useState({ hits: [] });
  7.   // useEffect(async () => {
  8.   //   const result = await axios(
  9.   //     'https://hn.algolia.com/api/v1/search?query=redux',
  10.   //   );
  12.   //   setData(result.data);
  13.   // }, []);
  14.   useEffect(() => {
  15.     (async () => {
  16.       const result = await axios(
  17.         "https://hn.algolia.com/api/v1/search?query=redux"
  18.       );
  19.       setData(result.data);
  20.     })();
  21.   }, []);
  23.   return (
  24.     <ul>
  25.       {data.hits.map(item => (
  26.         <li key={item.objectID}>
  27.           <a href={item.url}>{item.title}</a>
  28.         </li>
  29.       ))}
  30.     </ul>
  31.   );
  32. }
  34. export default App;

7-13行中，会
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返回nothing或者clean up function，而async返回的是一个promise，如果对async或者useEffect不熟悉的参见 文章 useEffect 和 异步

第21行，如果去掉[],会发现无限循环的请求接口，这是因为请求接口之后，重新setData，导致重新渲染，重新执行该effect，如此循环……
传入一个空数组，只能在mount的时候请求一次，如果想表单某个值改变的时候出发请求，该怎么实现呢？

触发请求

  1. import React, { Fragment, useState, useEffect } from 'react';
  2. import axios from 'axios';
  4. function App() {
  5.   const [data, setData] = useState({ hits: [] });
  6.   const [query, setQuery] = useState('redux');
  8.   useEffect(() => {
  9.     const fetchData = async () => {
  10.       const result = await axios(
  11.         `https://hn.algolia.com/api/v1/search?query=${query}`,
  12.       );
  14.       setData(result.data);
  15.     };
  17.     fetchData();
  18.   }, [query]);
  20.   return (
  21.     <Fragment>
  22.       <input
  23.         type="text"
  24.         value={query}
  25.         onChange={event => setQuery(event.target.value)}
  26.       />
  27.       <ul>
  28.         {data.hits.map(item => (
  29.           <li key={item.objectID}>
  30.             <a href={item.url}>{item.title}</a>
  31.           </li>
  32.         ))}
  33.       </ul>
  34.     </Fragment>
  35.   );
  36. }
  38. export default App;

如上，每当input输入值改变的时候，都会对应的触发请求，通过维护一个query的值作为useEffect的依赖。
每次输入哪怕是只改变一个字母，都会频繁请求，那么我们通过一个按钮来控制请求，

  1. import React, { Fragment, useState, useEffect } from "react";
  2. import axios from "axios";
  4. function App() {
  5.   const [data, setData] = useState({ hits: [] });
  6.   const [query, setQuery] = useState("redux");
  7.   const [search, setSearch] = useState("redux");
  9.   useEffect(() => {
  10.     const fetchData = async () => {
  11.       const result = await axios(
  12.         `https://hn.algolia.com/api/v1/search?query=${search}`
  13.       );
  15.       setData(result.data);
  16.     };
  18.     fetchData();
  19.   }, [search]);
  21.   return (
  22.     <Fragment>
  23.       <input
  24.         type="text"
  25.         value={query}
  26.         onChange={event => setQuery(event.target.value)}
  27.       />
  28.       <button type="button" onClick={() => setSearch(query)}>
  29.         Search
  30.       </button>
  31.       <ul>
  32.         {data.hits.map(item => (
  33.           <li key={item.objectID}>
  34.             <a href={item.url}>{item.title}</a>
  35.           </li>
  36.         ))}
  37.       </ul>
  38.     </Fragment>
  39.   );
  40. }
  42. export default App;

维护两个state，且状态同步，有点让人疑惑

  1. import React, { Fragment, useState, useEffect } from "react";
  2. import axios from "axios";
  4. function App() {
  5.   const [data, setData] = useState({ hits: [] });
  6.   const [query, setQuery] = useState("redux");
  7.   const [url, setUrl] = useState(
  8.     "https://hn.algolia.com/api/v1/search?query=redux"
  9.   );
  11.   useEffect(() => {
  12.     const fetchData = async () => {
  13.       const result = await axios(url);
  14.       setData(result.data);
  15.     };
  17.     fetchData();
  18.   }, [url]);
  20.   return (
  21.     <Fragment>
  22.       <input
  23.         type="text"
  24.         value={query}
  25.         onChange={event => setQuery(event.target.value)}
  26.       />
  27.       <button
  28.         type="button"
  29.         onClick={() =>
  30.           setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
  31.         }
  32.       >
  33.         Search
  34.       </button>
  36.       <ul>
  37.         {data.hits.map(item => (
  38.           <li key={item.objectID}>
  39.             <a href={item.url}>{item.title}</a>
  40.           </li>
  41.         ))}
  42.       </ul>
  43.     </Fragment>
  44.   );
  45. }
  47. export default App;

我们尝试封装URL,每当点击search的时候，会改变url的query，url变化，就会触发effect的执行.

Loading 和 Error Indicator

loading和error indicator

  1. import React, { Fragment, useState, useEffect } from "react";
  2. import axios from "axios";
  4. function App() {
  5.   const [data, setData] = useState({ hits: [] });
  6.   const [query, setQuery] = useState("redux");
  7.   const [url, setUrl] = useState(
  8.     "https://hn.algolia.com/api/v1/search?query=redux"
  9.   );
  10.   const [loading, setLoading] = useState(false);
  11.   const [err, setError] = useState(false);
  12.   useEffect(() => {
  13.     setLoading(true);
  14.     try {
  15.       const fetchData = async () => {
  16.         const result = await axios(url);
  17.         setData(result.data);
  18.         setLoading(false);
  19.       };
  21.       fetchData();
  22.     } catch (err) {
  23.       setError(true);
  24.     }
  25.   }, [url]);
  27.   return (
  28.     <Fragment>
  29.       <input
  30.         type="text"
  31.         value={query}
  32.         onChange={event => setQuery(event.target.value)}
  33.       />
  34.       <button
  35.         type="button"
  36.         onClick={() =>
  37.           setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
  38.         }
  39.       >
  40.         Search
  41.       </button>
  42.       {err && <div>Something goes wrong ... </div>}
  44.       {loading ? (
  45.         <div>Loading...</div>
  46.       ) : (
  47.         <ul>
  48.           {data.hits.map(item => (
  49.             <li key={item.objectID}>
  50.               <a href={item.url}>{item.title}</a>
  51.             </li>
  52.           ))}
  53.         </ul>
  54.       )}
  55.     </Fragment>
  56.   );
  57. }
  59. export default App;

自定义Hook

封装自定义Hooks

  1. import React, { Fragment, useState, useEffect } from "react";
  2. import axios from "axios";
  4. const useDataApi = (initialUrl, initialData) => {
  5.   const [data, setData] = useState(initialData); //设置初始值
  6.   const [url, setUrl] = useState(initialUrl);
  7.   const [isLoading, setIsLoading] = useState(false);
  8.   const [isError, setIsError] = useState(false);
  10.   useEffect(() => {
  11.     const fetchData = async () => {
  12.       setIsError(false);
  13.       setIsLoading(true);
  14.       try {
  15.         const result = await axios(url);
  17.         setData(result.data);
  18.       } catch (error) {
  19.         console.log(error);
  20.         setIsError(true);
  21.       }
  23.       setIsLoading(false);
  24.     };
  26.     fetchData();
  27.   }, [url]);
  29.   return [{ data, isLoading, isError }, setUrl];
  30. };
  32. function App() {
  33.   const [query, setQuery] = useState("redux");
  34.   const [{ data, isLoading, isError }, doFetch] = useDataApi(
  35.     "https://hn.algolia.com/api/v1/search?query=redux",
  36.     { hits: [] }
  37.   );
  39.   return (
  40.     <Fragment>
  41.       <form
  42.         onSubmit={event => {
  43.           doFetch(`http://hn.algolia.com/api/v1/search?query=${query}`);
  44.           event.preventDefault();
  45.         }}
  46.       >
  47.         <input
  48.           type="text"
  49.           value={query}
  50.           onChange={event => setQuery(event.target.value)}
  51.         />
  52.         <button type="submit">Search</button>
  53.       </form>
  55.       {isError && <div>Something went wrong ...</div>}
  57.       {isLoading ? (
  58.         <div>Loading...</div>
  59.       ) : (
  60.         <ul>
  61.           {data.hits.map(item => (
  62.             <li key={item.objectID}>
  63.               <a href={item.url}>{item.title}</a>
  64.             </li>
  65.           ))}
  66.         </ul>
  67.       )}
  68.     </Fragment>
  69.   );
  70. }
  72. export default App;

这就是自定义hook，自定义hook通常以use开头，返回数组。
hook接收参数，内部管理状态，返回data、loading、error。

useReducer中请求数据

  1. import React, { Fragment, useState, useEffect, useReducer } from "react";
  2. import axios from "axios";
  4. const dataFetchReducer = (state, action) => {
  5.   switch (action.type) {
  6.     case "FETCH_INIT":
  7.       return {
  8.         ...state,
  9.         isLoading: true,
  10.         isError: false
  11.       };
  12.     case "FETCH_SUCCESS":
  13.       return {
  14.         ...state,
  15.         isLoading: false,
  16.         isError: false,
  17.         data: action.payload
  18.       };
  19.     case "FETCH_FAILURE":
  20.       return {
  21.         ...state,
  22.         isLoading: false,
  23.         isError: true
  24.       };
  25.     default:
  26.       throw new Error();
  27.   }
  28. };
  30. const useDataApi = (initialUrl, initialData) => {
  31.   const [url, setUrl] = useState(initialUrl);
  32.   const [state, dispatch] = useReducer(dataFetchReducer, {
  33.     isLoading: false,
  34.     isError: false,
  35.     data: initialData
  36.   });
  38.   useEffect(() => {
  39.     const fetchData = async () => {
  40.       dispatch({ type: "FETCH_INIT" });
  41.       try {
  42.         const result = await axios(url);
  43.         dispatch({ type: "FETCH_SUCCESS", payload: result.data });
  44.       } catch (error) {
  45.         dispatch({ type: "FETCH_FAILURE" });
  46.       }
  47.     };
  48.     fetchData();
  49.   }, [url]);
  50.   return [state, setUrl];
  51. };
  53. function App() {
  54.   const [query, setQuery] = useState("redux");
  55.   const [{ data, isLoading, isError }, doFetch] = useDataApi(
  56.     "https://hn.algolia.com/api/v1/search?query=redux",
  57.     { hits: [] }
  58.   );
  60.   return (
  61.     <Fragment>
  62.       <form
  63.         onSubmit={event => {
  64.           doFetch(`http://hn.algolia.com/api/v1/search?query=${query}`);
  65.           event.preventDefault();
  66.         }}
  67.       >
  68.         <input
  69.           type="text"
  70.           value={query}
  71.           onChange={event => setQuery(event.target.value)}
  72.         />
  73.         <button type="submit">Search</button>
  74.       </form>
  76.       {isError && <div>Something went wrong ...</div>}
  78.       {isLoading ? (
  79.         <div>Loading...</div>
  80.       ) : (
  81.         <ul>
  82.           {data.hits.map(item => (
  83.             <li key={item.objectID}>
  84.               <a href={item.url}>{item.title}</a>
  85.             </li>
  86.           ))}
  87.         </ul>
  88.       )}
  89.     </Fragment>
  90.   );
  91. }
  93. export default App;

取消请求

请求api的时候，如果组件unmount，也会触发setState 详见组件unmount取消setState
在hooks中如何避免组件unmount的时候setState呢？

  1. const useDataApi = (initialUrl, initialData) => {
  2.   const [url, setUrl] = useState(initialUrl);
  4.   const [state, dispatch] = useReducer(dataFetchReducer, {
  5.     isLoading: false,
  6.     isError: false,
  7.     data: initialData,
  8.   });
  10.   useEffect(() => {
  11.     let didCancel = false;
  13.     const fetchData = async () => {
  14.       dispatch({ type: 'FETCH_INIT' });
  16.       try {
  17.         const result = await axios(url);
  19.         if (!didCancel) {
  20.           dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
  21.         }
  22.       } catch (error) {
  23.         if (!didCancel) {
  24.           dispatch({ type: 'FETCH_FAILURE' });
  25.         }
  26.       }
  27.     };
  29.     fetchData();
  31.     return () => {
  32.       didCancel = true;
  33.     };
  34.   }, [url]);
  36.   return [state, setUrl];
  37. };

重点第11行、19行、23行、31-33行。
通过didCancel标志来控制。

Reference：
https://www.robinwieruch.de/react-hooks-fetch-data